0 Membuat Sudut Lengkung Pada Garis Border

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.