Membuat Rounded Corner / Sudut Melengkung Pada Border Blog

Dalam sebuah template blog, biasanya suka akan bahkan sudah pasti dihiasi dengan berbagai widget atau apapun yang dapat membuat Tampilan blog tersebut terlihat lebih elegan. dan salah satunya adalah dengan memberikan polesan pada garis atau border baik pada sidebar, postingan atau dimanapun kita suka. Pada postingan ini saya mengambil judul membuat rounded corner/sudut melengkung pada blog, maksudnya memberikan nuansa beda pada tampilan sudut-sudut garis pada blog kita. Sebenarnya saya mengambil nama judul untuk postingan ini karena ada pertanyaan dari salah satu sahabat blogger saya yang kurang lebih menanyakan tentang hal ini :

kang gmana caranya memodifiksi border kayak pnya maz soalnya kan template standartnya bordernya gk kayak gini mohon bantuannya ^_^

Untuk contoh tampilannya sendiri kalian bisa melihat pada setiap sudut garis Blog ini. Sedangkan cara membuatnya sebenarnya mudah dan sangat simple, kalian hanya tinggal menambahkan kode berikut pada bagian yang akan kalian rubah sudut garisnya :

-moz-border-radius

kode diatas itu adalah dasar membuat sudut garis lengkung, dan kita bisa mengembangkan kode tersebut supaya bisa diterapkan disetiap sudut garis. Sebelumnya saya akan menjelaskan dulu Posisi suatu garis berbentuk persegi, dalam sebuah persegi pasti terdapat bagian atas(top), kanan(right), kiri(left) dan bagian bawah(bottom) garis. Nah Jika kita terapkan pada kode diatas maka hasilnya akan seperti ini :

-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topright
-moz-border-radius-topleft

Keterangan :
-moz-border-radius => membuat seluruh sudut melengkung
-moz-border-radius-bottomright => membuat garis melengkung kanan bawah
-moz-border-radius-bottomleft => membuat garis kiri bawah melengkung
-moz-border-radius-topright => membuat garis melengkung kanan atas
-moz-border-radius-topleft => membuat garis melengkung kiri atas

Contoh bentuk sudut garis melengkung sebagai berikut :

CONTOH SUDUT GARIS MELENGKUNG

Untuk pemasangannya sendiri, kalian bisa pilih mau dipostingan, sidebar, footer atau yang lainnya, yang pasti untuk membuat sudut garisnya melengkung kalian cukup menambahkan kode diatas. Contoh penerapan pada sidebar :

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}

Keterangan :

== Angka 20px pada kode diatas berarti total sudut lengkung yang akan kita buat, sebenarnya itu tergantung selera kalian, semakin besar angkanya semakin besar juga sudut lengkungnya.
== Contoh diatas itu akan membuat semua sudut sidebar kalian melengkung, jadi kalian bisa merubah tampilannya, misalkan kalian hanya ingin membuat sudut melengkung pada kedua sisi atasnya saja, maka kalian hanya tinggal menambahkan kode berikut saja :

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;

Untuk sisanya saya rasa kalian bisa mengolahnya sendiri atau bahkan bisa lebih hebat lagi.

NB : kode diatas hanya bisa dipakai untuk browser mozilla Firefox ( kalo salah tolong dibantu). Jika kalian ingin tampilan ini bekerja di browser lain kalian lihat penjelasan kode berikut :

** -moz-border-radius : digunakan untuk Mozilla firefox
** -webkit-border-radius : untuk Chrome dan Safari
** -khtml-border-radius : untuk browser-browser lama yang mendukung kode ini
** border-radius : untuk pengecekan terhadap browser-browser baru ( yang mendukung kode ini )

Contoh Penerapan pada sidebar:

1. Seluruh Sudut sidebar

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

2. Sudut atas saja yang melengkung

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

3. Sudut bawah saja yang melengkung

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

Untuk contoh diatas mungkin bisa kalian mengerti dan semoga kalian bisa lebih jauh dan lebih hebat mengembangkannya. oia.. contoh diatas saya ambil untuk penerapan pada sidebar ( sesuaikan dengan sidebar pada kode template kalian, kalian tinggal menambahkan kode yang perlu untuk membuat sudut garisnya melengkung ), untuk penerapan pada postingan, footer, silahkan tambahkan pada kode HTML template kalian.

Penutup :
kode garis/border pada penjelasan diatas memakai bentuk satu garis (solid), untuk lebih memahami jenis-jenis garis silahkan kalian baca juga artikel saya yang berjudul Jenis-jenis border pada Blog dan cara membuatnya.

Semoga artikel diatas akan sangat bermanfaat bagi kalian dan semoga dapat membantu sahabat saya yang bertanya. Terima kasih dan apabila ada kekurangan saya tunggu komentar kalian.