Cara Membuat Border CSS Rounded Corner

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;

Baca Juga

• Download Adobe Photoshop Cc 2018
• Template Voucher Hotspot Mikrotik Gradasi
• Cara Membuat Template Voucher Hotspot Mikrotik
• Template Voucher Mikrotik Versi cdr (Corel Draw)
• Pagar Tralis 3D Sket Up Material
• Template Login Page Hotspot PSB
• Kumpulan DP Malam Minggu Bergerak
• Teknologi Tanam Mina Padi Pada Tanah Persawahan
• Pemandangan Indah Gua Melissani Yunani
• Sinkronisasi Waktu Otomatis di Routerboard
• Cara Membuat Handscroll Image Di Blog
• Beberapa Situs Penyedia CSS3 Generator
• Membuat Diamond Dengan CSS3
• Tri Angle Label Cloud Blogspot
• CSS3 Gradient Generator Online

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