CSS BORDER

Banyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css border yang bisa kita gunakan dalam pembuatan web atau untuk keperluan lain :

1. Border-style
Properti ini dapat mengatur tampilan border dengan bermacam-macam bentuk dan efek.

<style type="text/css">

div.dotted {border-style:dotted;}

</style>

<div class="dotted">TEKS DISINI</div>

<style type="text/css">

div.dashed {border-style:dashed;}

</style>

<div class="dashed">TEKS DISINI</div>

<style type="text/css">

div.solid {border-style:solid;}

</style>

<div class="solid">TEKS DISINI</div>

<style type="text/css">

div.double {border-style:double;}

</style>

<div class="double">TEKS DISINI</div>

<style type="text/css">

div.groove {border-style:groove;}

</style>

<div class="groove">TEKS DISINI</div>

<style type="text/css">

div.ridge {border-style:ridge;}

</style>

<div class="ridge">TEKS DISINI</div>

<style type="text/css">

div.inset {border-style:inset;}

</style>

<div class="inset">TEKS DISINI</div>

<style type="text/css">
div.outset {border-style:outset;}
</style>

<div class="outset">TEKS DISINI</div>

2. Border-width
Properti border-width digunakan untuk mengatur ketebalan border. Dan nilai ketebalan border bisa diatur dengan satuan nilai Pixel (px) atau menggunakan nilai yang sudah ditentukan yaitu thin, medium, dan thick.

<style type="text/css">
div.satu
{
border-style: solid ;
border-width: 10px ;
}
</style>

<div class="satu">TEKS DISINI</div>

<style type="text/css">
div.dua
{
border-style: solid ;
border-width: thin ;
}
</style>

<div class="dua">TEKS DISINI</div>

<style type="text/css">
div.tiga
{
border-style: solid ;
border-width: medium ;
}
</style>

<div class="tiga">TEKS DISINI</div>

<style type="text/css">
div.empat
{
border-style:solid;
border-width: thick ;
}
</style>

<div class="empat">TEKS DISINI</div>

3. Border-Color
Properti border-Color yang digunakan untuk mengatur warna border.Dan pengaturan warna kita bisa menggunakan penulisan kode seperti :

• nama-nama warna, penulisannya "red, blue, green, dll" 
• RGB, penulisannya dengan nilai RGB, seperti "rgb(225, 225, 225)" 
• Hex, penulisannya dengan nilai hex, seperti "# FF0000" 

<style type="text/css">
div.hijau
{
border-style:solid;
border-width:5px;
border-color:green;
}
</style>

<div class="hijau">TEKS DISINI</div>

<style type="text/css">
div.merah
{
border-style:solid;
border-width:10px;
border-color:#ff0000;
}
</style>

<div class="merah">TEKS DISINI</div>

<style type="text/css">
div.abu-abu
{
border-style:solid;
border-width:15px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="abu-abu">TEKS DISINI</div>

4. Contoh Border lain
Kita bisa menentukan ukuran kertebalan dan warna hanya pada border bagian atas, bawah, maupun samping.

<style type="text/css">
div.tebal-atas
{
border-style:solid;
border-top-width:20px;
border-color:rgb(225, 225, 225);
}
</style>

<div class="tebal-atas">TEKS DISINI</div>

<style type="text/css">
div.tebal-bawah
{
border-style:solid;
border-bottom-width:20px;
border-color:green;
}
</style>

<div class="tebal-bawah">TEKS DISINI</div>

<style type="text/css">
div.tebal-samping
{
border-style:solid;
border-left-width:20px;
border-color:#E3E3AC;
}
</style>

<div class="tebal-samping">TEKS DISINI</div>

Ok...., Silahkan anda bisa mengexplore sendiri bentuk border yang lain sesuai keinginan anda sambil belajar. Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.