Border-Radius : Membuat Garis Lengkung Dengan CSS

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. 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.

 

Semoga bermanfaat ya.

CSS Border Style

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

 

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

 

Berikut ini contoh dari border yang bisa sobat gunakan :

 

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

 

dotted dotted dotted dotted dotted

 

</div>

 

dotted dotted dotted dotted dotted

 

 

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

 

solid solid solid solid solid

 

</div>

 

solid solid solid solid solid

 

 

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

 

dashed dashed dashed dashed dashed

 

</div>

 

dashed dashed dashed dashed dashed

 

 

 

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

 

groove groove groove groove groove

 

</div>

 

groove groove groove groove groove

 

 

 

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

 

double double double double double

 

</div>

 

double double double double double

 

 

 

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

 

inset inset inset inset inset

 

</div>

 

inset inset inset inset inset

 

 

 

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

 

outset outset outset outset outset

 

</div>

 

outset outset outset outset outset

 

 

 

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

 

ridge ridge ridge ridge ridge

 

</div>

 

ridge ridge ridge ridge ridge

 

 

Border Campur Aduk 

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

 

dotted dashed double outset

 

</div>

dotted dashed double outset

 

 

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

 

Semoga bermanfaat.