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.melengkung

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

Mozilla EquivalentBrowser Opera 10.5Webkit Equivalent (Safari 3)
-moz-border-radius-toprightborder-top-right-radius-webkit-border-top-right-radius
-moz-border-radius-bottomrightborder-bottom-right-radius-webkit-border-bottom-right-radius
-moz-border-radius-bottomleftborder-bottom-left-radius-webkit-border-bottom-left-radius
-moz-border-radius-topleftborder-top-left-radius-webkit-border-top-left-radius
-moz-border-radiusborder-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!blockquote

0 comments:

Post a Comment

Search

Popular Posts

Powered by Blogger.

Blog Archive