Apa itu border radius? Kalau border, pasti sobat tahu kan? Nah, hampir mirip dengan border itu. Border radius merupakan salah satu script CSS. Sedangkam fungsinya yaitu membuat lengkungan pada suatu item Html. Contohnnya, widget blog. Bentuknya kotak, tetapi apabila ditambahi border radius maka pada ujung-ujung kotak widget tersebut akan berubah. Berikut script Border-radius.

#nama id widget/yang lainnya {
border-radius:10px;}

Coba perhatikan pada script berwarna merah. Ya, itulah script border radius. Dari script tersebut, maka hasilnya seperti ini.


Alihkan perhatian ke setiap sudut kotak diatas. Sudut-sudut tersebut tidak lancip, benar kan? Sedikit tumpul. Jumlah ketumpulan tersbut adalah 10px. Jika sobat menambahi nilai 10px menjadi lebih tinggi maka setiap sudut akan semakin tumpul.

Ketumpulan pada SATU (1) sudut saja

Pada gambar diatas, semua sudutnya tumpul. Tetapi, bagaimana caranya agar hanya 1, 2, / 3 sudut saja yang tumpul? Lihat caranya di bawah ini!

Perhatikan.

1. border-top-right-radius: 0px;
2. border-top-left-radius: 10px;
3. border-bottom-left-radius: 0px;
4. border-bottom-right-radius: 10px;

border-radius: 0px 10px 0px 10px 

Contoh:

1. border-radius: 10px 0px 10px 0px;

Maka hasilnya:



Selanjutnya coba-coba saja dari keempat angka tersebut dan lihat hasilnya. Ok cukup sampai di sini, semoga bermanfaat.