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.

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;

Catatan:
» 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.

Demo

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