Border Garis Lengkung Dengan CSS
November 25, 2011
3 Comments
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
-Moz-Border-Radius (Untuk Mozilla)
-Webkit-Border-Radius (Untuk Safari)
Border-Radius (Support Opera 10.5)
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...
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...
ini yang ane cari-cari :D makasih gan udah dishare... :)
ReplyDeletesama-sama :D
ReplyDeleteThanks udah share code nya mas bro :-)
ReplyDeletebulan pada bumi datar | bisnis kecil