Jenis-Jenis Border-radius (melengkung)

Hallo Sobat Semua,,,Kali ini saya akan share Jenis-Jenis Border-radius (melengkung)..

ok deh gak usah panjang-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="-moz-border-radius: 5px; background-color: #cccccc; border: 1px solid #000; padding: 10px;">
ISI TULISAN
</div>

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

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

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

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

-Webkit-Border-Radius (Untuk Safari)

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

<div style="-webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 50px; background-color: #f5d0a9; 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.. ^_^

Jenis-Jenis Border-radius (melengkung) 9out of 10 based on 10 ratings. 9 user reviews.