.

Penggunaan garis lengkung atau border cukup membantu memperindah tampilan blog kita, maka dari itu pada postingan kali ini saya akan mencoba membagi tips kepada sobat blogger gimana cara membuat garis lengkung atau border pada template blog kita.

Tips ini udah saya coba di blog saya, anda dapat melihatnya sendiri beberapa border atau garis lengkung yang terdapat di blog saya ini. Karena artikel ini sangat bermanfaat guna memperindah tampilan blog kita, maka saya mencoba mempostingnya kembali. Artikel ini saya dapat dari sebuah blog yang sumbernya ada saya cantumkan di akhir postingan.

Oke langsung aja ke TKp dari pada ngoceh terus heheh ....

Dibawah ini saya akan berikan contoh penggunaan " border-radius " pada tulisan, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

Syntax untuk border-radius

*Mozilla Equivalent*	*Browser Opera 10.5*	*Webkit Equivalent (Safari 3)*
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Jika sobat blogger ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya berikan warna merah tebal diatas kedalam css sidebar blog sobat.

Selamat mencoba, Semoga bermanfaat .... !!!

Sumber : http://miscah.blogspot.com/2010/04/border-radius-membuat-garis-lengkung.html