Sudut Border Melengkung Dengan CSS

Kali ini ZackMaru 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 ZackMaru yang telat ini. Semoga bermanfaat bagi anda yang membutuhkan maupun belajar.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Cadangan Doang. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Cadangan Doang dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

• Trik Slide To Unlock With Css and jQuery
• CSS3: Balloon Style Navigation Menu
• Script Blokir IP Untuk Blog
• Membuat Show/Hide Chatbox Dengan jQuery
• Make 4 Columns Post

Ditulis oleh Gojek Ewako pada tanggal 30/07/12