Kode CSS Border-radius atau melengkung

Sekian lama ngeblog,jarang sekali INFONETMU menulis tentang tutorial CSS,sampai yang saya ingat terakhir hanya memberi tabel kode warna CSS juga sedikit mengenal tentang Kode CSS Border Padding dan Margin, Kali ini saya akan tulis lagi tentang kode CSS untuk untuk border-radius atau border melengkung pada blog,nah bagaimana membuat garis melengkung pada pojok border? inilah tutorialnya.

Adapun syntax untuk border-radius untuk berbagai browser berbeda-beda dibawah inilah tabelnya:

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>

Itulah sedikit tutorial tentang border-radius dan beberapa jenisnya,silahkan kreasikan untuk memberi variasi pada kotak kamu,misalnya untuk mempercantik blockquote dengan css misalnya,semoga bermanfaat!

Terima kasih telah membaca artikel Kode CSS Border-radius atau melengkung.Silahkan baca artikel INFONETMU tentang tips blog yang lainya dibawah ini!

Comment With Facebook!