Cara Membuat Sudut Lengkung Pada Garis Border

Cara Membuat Sudut Lengkung Pada Garis Border – Salah satu trik untuk memperindah tampilan blog ialah dengan memberikan efek/sudut lengkung pada garis border. Bukan hanya memperindah akan tetapi juga dapat memberi kesan manis dan elegant.

Sudut lengkung dalam kehidupan sehari-hari akan memberi kesan smooth dan elegan. Berbeda halnya dengan sudut lancip memberi kesan tegas dan tajam.

Syntax dasar CSS3:
border-radius: 30px 0px 30px 0px;
-moz-border-radius: 30px 0px 30px 0px;
-webkit-border-radius: 30px 0px 30px 0px; 
border: 2px solid #72C7F8;
padding:10px;
  • moz = compatible dengan browser mozila, webkit = compatible dengan browser chrome dan safari.
  • radius: adalah code perintah untuk membuat sudut lengkung.
  • border: adalah code perintah untuk bagian garis-garis sisinya.
  • padding: adalah code perintah untuk jarak antara tulisan dengan border. 

Syntax lengkap CSS3 adalah sebagai berikut. 

.lengkung{
     border-radius:30px 0px 30px 0px;
     -moz-border-radius: 30px 0px 30px 0px;
     -webkit-border-radius: 30px 0px 30px 0px;
     border:2px solid #72C7F8;
     padding:10px;
}

Cara penggunaan pada postingan:

<div class=”lengkung”>
    Contoh garis lengkung created by junedalbughisy.blogspot.com
</div>

Untuk melihat hasilnya klik link demo di bawah ini.

Semoga tutorial kali ini bermanfaat. Dan jangan lupa like dan komentarnya demi kemajuan blog ini. Terimakasih….!!!