Cara Membuat Sudut Lengkung Pada Border dengan CSS

Cara Membuat Sudut Lengkung Pada Border dengan CSS – Untuk tutorial kali ini saya akan share bagaimana cara membuat sudut lengkung pada pada border yang mana sudut lengkung terbentuk dengan menggunakan sedikit tambahan kode CSS.

Untuk lebih jelasnya perhatikan code CSS di bawah ini.

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

boder-radius: 30px;

Keterangan:

• -webkit- digunakan pada browser google Chrome atau Safari.
•  -moz- digunakan pada browser modzilla firefox.
• radius digunakan untuk membentuk sudut lengkung pada border.

Setelah sobat mengetahui dasarnya kini untuk pengembangan dari code dasar di atas agar terlihat lebih spesifik seperti code di bawah ini.

Contoh 1

.lengkung1{
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
border: 3px solid #920707;
width: 300px;
margin:auto;
height: 40px;
text-align:center;
padding-top:20px;
margin-top: 20px;
}

Lihat Demo

Contoh 2

.lengkung2{
-webkit-border-bottom-left-radius: 40px; /*untuk memberikan efek lengkung di sisi kiri bagian bawah*/
-webkit-border-top-right-radius: 40px;  /*untuk memberikan efek lengkung di sisi kanan bagian atas*/
border: 3px solid #920707;
width: 300px;
margin:auto;
height: 40px;
text-align:center;
padding-top:20px;
margin-top: 20px;
}

Lihat Demo

Semoga tutorial kali ini bermanfaat Happy Blogging.