Cara Membuat Sudut Border Melengkung Dengan CSS

Cara Membuat Sudut Border Melengkung Dengan CSS. Saya ucapkan mohon maaf karena penerbitan post Mas Yusa agak telat dikarenakan sibuk uprak uprak template di blog baru Si-naruto. Hehehehe..sangking sibuknya tadi malam cuma tidur 1 jam doang (Whattt....!!!). Hahaha :D Iya, karena uprak uprak template nya 80%. Wah ini ko jadi promosi blog baru ya... hahaha

Kali ini Mas yusa akan mengeshare tutorial Cara Membuat Sudut Border Melengkung Dengan CSS. Sobat pasti sudah sering melihat border blog sobat yang sudutnya melengkung Contohnya : Blog Saya (Hahaha). Membuat sudut border blog kita melengkung membuat blog kita lebih styles alias keren. Jika sobat ingin membuatnya baca selengkapnya di bawah ini.

Cara 1 Membuat Sudut Border Melengkung :

-webkit-border-radius: 8px;-moz-border-radius: 8px;

Mangsut dari -webkit adalah kode untuk memanggil border melengkung di  Google Chrome. Sedangkan -moz kode untuk memanggil border melengkung di Mozzila. Jika ingin menentukan radius kelengkungan, silahkan sobat ganti yang berwarna merah (8xp).

Maka jika di satukan dengan kode border akan jadi seperti ini :

border: 2px solid #ff0000;
-webkit-border-radius: 8px;-moz-border-radius: 8px;

Cara 2 Membuat Sudut Border Melengkung :
Jika sobat ingin membuat sudut border ada yang melengkung atau ada yang tidak melengkung, sobat gunakan kode di bawah ini :

-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft; 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-right-radius: 0px;

Top Left : kiri atas, Bottom Right : bawah kanan, Top Right : Atas Kanan, Bottom Left : Bawah kiri. Mangsut dari 0px adalah tidak beradius, atau tidak melengkung.

Maka jika disatukan dengan kode border akan jadi seperti ini :

border: 2px solid #ff0000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft; 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-right-radius: 0px;

 Sekian tutorial dari Mas yusa yang telat ini. Semoga bermanfaat bagi anda yang membutuhkan maupun belajar.

Tweet

Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Cara Membuat Sudut Border Melengkung Dengan CSS dan anda bisa menemukan artikel Cara Membuat Sudut Border Melengkung Dengan CSS ini dengan url http://masyusa.blogspot.com/2012/07/cara-membuat-sudut-border-melengkung.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Sudut Border Melengkung Dengan CSS ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Sudut Border Melengkung Dengan CSS sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar

About Me-->