Contoh Border Style

Dalam membangun sebuah halaman website, kehadiran CSS (Cascading Style Sheet) sangatlah penting karena selain sebagai bahan untuk memberikan tampilan yang sangat menarik dan enak dilihat mata bukan seperti HTML monoton yang terlihat sangatlah kaku, maka dari itu CSS untuk kalangan web devolopement sangatlah penting. Maka dari itu untuk penggunaan CSS ada yang perlu kita perhatikan atribut dan fungsinya.

Namun pada kesempatan kali ini saya akan membagi beberapa type CSS untuk memanipulasi bentuk border. Ada beberapa yang bisa kita lihat contoh-contoh di bawah ini berikut dengan atribut untuk pembuatannya :

border-style: groove;

Groove Style Border

border-style:botterd;

Botted Style Border

border-style:dashed;

Dashed Style Border

border-style:double;

Double Style Border

border-style:inherit;

Inherit Style Border

border-style:inset;

Inset Style Border

border-style:outset;

Outset Style Border

border-style:ridge;

Ridge Style Border

border-style:solid;

Solid Style Border

Jika anda ingin beberikan efek melengkung pada setiap sudut-sudutnya, maka anda haruslah menambahkan efek radius pada script CSS nya.

Sebagai contoh kali ini saya akan membuatnya dengan style solid untuk memperjelas efek radiusnya. Silahkan lihat contoh scriptnya di bawah ini :

<style>
.box1 {
background: yellow;
border-style: solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 10px;
height: 10px;
</style>
Maka hasil yang akan terkombinasi dengan HTML akan seperti berikut :

Border ini menggunakan efek radius 10px.

Catatan: 
* Script yang berwarna kuning adalah menentukan warna background pada box kotak,
* Script yang berwarna hijau adalah menentukan style border,
* Script yang berwarna merah adalah menentukan  radius kelengkungan yaitu 10px,
* Script yang berwarna putih adalah menentukan radius kelengkungan yang bisa dibaca oleh Mozilla Firefox,
* Script yang berwarna biru adalah menentukan radius kelengkungan yang bisa dibaca oleh Webkit
* Script yang berwarna pink adalah menentukan lebar dan tinggi pada ukuran box.

Nah, demikian adalah beberapa tipe Border Style yang mungkin bisa menambah referensi anda. Semoga bermanfaat.