Membuat Sudut Lengkung Pada Garis Border

Situseo Blog : Dengan hadirnya css3 untuk membuat sudut garis border lengkung atau tumpul sudah bisa dilakukan, dengan design tampilan garis lengkung pada border bisa menghasilkan tampilan blog yang elegant, manis dan menarik.

Penggunaan kode css garis border lengkung adalah dengan menggunakan kode border-radius, penggunaan dalam template saya ilustrasikan sebagai berikut :

border-radius: 7px;

border: 2px solid #72C7F8;

border-radius sebesar 7px akan menghasilkan garis lengkung seukuran angka tersebut pada setiap sudut-sudutnya, baik itu sudut kiri atas, kanan atas, kiri bawah dan kanan bawah. Untuk membuat sudut garis border berbeda pada setiap sudutnya, kita harus memberi keterangan perintah tambahan pada kode css nya, sebagai contoh saya akan membuat sudut lengkung pada bagian kanan atas suatu border dengan angka lengkung sebesar 30px, kode css yang di pakai adalah :

border-radius: 30px 0px 0px 0px; 
-moz-border-radius: 30px 0px 0px 0px; 
-webkit-border-radius: 30px 0px 0px 0px; 
border: 2px solid #72C7F8;

Keterangan :
moz = mozila, webkit = chrome dan safari, keterangan moz dan webkit merupakan perintah terhadap browser supaya efek tersebut bisa berjalan jika menggunakan browser tersebut.
border adalah perintah untuk bagian garis sisi-sisinya
radius adalah kode perintah untuk membuat sudut lengkung
30px = bagian atas 0px = kanan 0px  = bawah 0px = kiri, angka kelengkungan dari sudut border
border: 2px solid #72C7F8 keterangan garis border setebal 2px dengan jenis garis solid dan warna garis #72C7F8.

Dalam keterangan diatas mengunakan jenis garis border solid, masih banyak jenis garis yangbisa kita pergunakan untuk kesesuian dari border-border yang kita pergunakan, untuk mengetahui jenis-jenis garis border bisa mengetahui melalui link tersebut.

Hasil dari kode tersebut seperti ini :

GARIS LENGKUNG KIRI ATAS 30PX

Untuk menentukan kelengkungan garis border yang 30px dengan garis border dengan ruang border yang berbeda akan menghasilkan garis lengkung yang berbeda, untuk menyesuaikan garis lengkung border sesuaikan dengan lebar ruang border yang akan diberi garis lengkung pada sisinya.

Untuk contoh garis-garis lengkung lainnya, kalian bisa meng-klik link demo dibawah.

Demo

Semoga bermanfaat,