Jenis-Jenis Border-radius(melengkung)

Sabtu, 02 Juli 2011

ok deh gak usah panjang basa-basinya langsung aja deh langkah-langkah cara membuat Jenis-Jenis Border-radius (melengkung).

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>

kode-kode diatas bisa juga ditempatkan pada sidebar atau pada css sobat, tinggal sobat bagaimana ingin mengaplikasikannya.. ^_^

0 komentar:

Posting Komentar