01
Border Garis Lengkung Dengan CSS

border-radius Sebelumnya saya pernah membahas tutorial macam - macam border. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, 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.

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>


Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.

sekian tips Border Garis Lengkung Dengan CSS, SEMOGA BERMANFAAT...

Do you want to share?

Do you like this story?

Anda sedang membaca artikel Border Garis Lengkung Dengan CSS dan artikel ini url permalinknya adalah http://info-adit.blogspot.com/2011/11/border-garis-lengkung-dengan-css.html
Semoga artikel Border Garis Lengkung Dengan CSS ini bisa bermanfaat.

Article :

0 komentar: — Skip to Comment.