Cara Membuat Border CSS Rounded Corner

Baca Juga

CSS Rounded Corner

Bismillah... setelah beberapa hari saya absen dari dunia blog kini Lutfie Tutorial blog akan share cara membuat Rounded Corner dengan CSS, jika sobat belum tau apa itu Rounded Corner? pada postingan ini insya allah saya akan sedikit memberikan penjelasan tentang CSS Rounded Corner.

Rounded Corner Adalah suatu teknik membuat garis lengkung di pojok baik di halaman web/situs atau dimana saja tanpa menggunakan gambar tapi dengan menggunakan kode CSS, jika sobat seorang designer web maka teknik ini perlu di kuasai, karena dengan teknik CSS ini situs akan terlihat menarik dan lebih stylish. oke mungkin dari penjelasan diatas sobat sudah paham dengan yang namanya Rounded Corner, jika belum mari lihat contoh di bawah.

Untuk membuat rounded Corner sangatlah mudah sobat tinggal menghapalkan beberpa code di bawah ini.

• -webkit-border-radius: ukuran;
• -moz-border-radius: ukuan;

Sebagai Contoh :
CSS Rounded Corner Dengan :

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border:#d81b21 solid;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:#d81b21 solid;

Semakin besar radius yang soba berikan makan lengkungnya akan semakin dalam sebagai contoh kita tambahkan yang tadinya 10px menjadi 20px.

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border:#d81b21 solid;

itu untuk dasar membuat rounded corner, sekarang bagaimana jika kita ingin membuat garis lengkungnya cuma sebelah kanan saja

Rounded Corner Sebelah kanan

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;

Rounded Corner Sebelah kiri

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;

Rounded Corner kiri atas dan kanan Bawah

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;

Rounded Corner kiri atas dan kanan Bawah

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;

Dari beberapa Contoh diatas mungkin sobat sudah tau dan mengerti tetang rounded corner, mungkin itu saja dulu yang saya dapat share pada postingan kali ini semoga bermanpaat,Good Luck Happy Blogging