Penggunaan border radius ada banyak macam, kali ini akan kita bahas pengunaan border-radius pada text, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode 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-
|
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>
Untuk pembuatan Border pada sidebar blog, terapkan kode CSS sidebar blog Sobat dengan kode di atas. Caranya hanya menambahkan kode yang saya dicetak tebalpada contoh di atas kedalam CSS sidebar blog Sobat.
-Monggoh Dicoba-
