Apa itu border ?
Pengertian border
Border merupakan bagian luar suatu element html yang menjadi pembatas antar element html. border sering di gunakan sebagai bingkai suatu element, karena border secara visual bisa di dekorasi stylenya.
Agar lebih memahami border suatu element html, perhatikan simulasi element di bawah ini:
Contoh di atas letak border berada di antara margin dan padding, penjelansan tentang margin dan padding akan kita bahas di artikel selanjutnya.
Secara default dalam element html, border memiliki nilai 0. kita dapat mengubah ukuran border dengan atrubut global atau dengan CSS.
Untuk mengatur border dengan CSS, CSS sendiri memiliki beberapa property dasar untuk menangani border property-property tersebut antara lain sebagai berikut:
Property Border-style CSS
Sebelum kita menggunakan property border-lain, property border-style perlu kita definisikan terlebih dahulu, karena tanpa adanya property ini, kita tidak dapat menampilkan secara visul border element html.
Property border-style berguna untuk memeilih jenis border yang akan di tampilkan. property border-style memiliki beberapa value yang bisa kita gunakan. value property ini antara lain sebagai berikut:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Contoh penggunaan value property border-style sebagai berikut:
Contoh property Border-style CSS
<html>
<head>
<title></title>
<style type="text/css">
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: dotted dashed
</style>
</head>
<body>
<p class="dotted" >contoh border dotted</p>
<p class="dashed" >contoh border dashed</p>
<p class="solid" >contoh border solid</p>
<p class="double" >contoh border double</p>
<p class="groove" >contoh border groove</p>
<p class="ridge" >contoh border ridge</p>
<p class="inset" >contoh border inset</p>
<p class="outset" >contoh border outset</p>
<p class="none" >contoh element p tanpa border</p>
<p class="hidden" >contoh menyembunyikan border</p>
</body>
</html>
Preview
contoh border dotted
contoh border dashed
contoh border solid
contoh border double
contoh border groove
contoh border ridge
contoh border inset
contoh border outset
contoh element p tanpa border
contoh menyembunyikan border
Secara default CSS akan memberikan border warna hitam. kita dapat mengubah warna border dengan property border-color.
Property Border-color CSS
Property border-color di gunakan untuk mengubah warna border. untuk memberi value pada property ini, kita dapat menggunakan satuan warna yang telah
kita pelajari bersama di artikel sebelumnya yakni dengan cara menuliskan nama warnanya, satuan rgb dan satuan hexdecimal. jika anda belum memahami satuan warna ini, anda dapat mempelajarinya di artikel saya sebelumnya, anda dapat melihat list post di navigasi kiri.
Contoh penggunaan property border-color sebagai berikut:
Contoh penggunaan property border-color CSS
<html>
<head>
<title></title>
<style type="text/css">
p{
border-style:solid;
border-color:blue;
}
</style>
</head>
<body>
<p>contoh border property di css</p>
</body>
</html>
Preview
contoh border property di css
Property Border-width CSS
Property border-width di gunakan untuk mendefinisikan lebar border element html.
value border ini adalah satuan ukuran yang di dukung oleh css seperti px, em, pt, cm dan lain-lain.
Contoh penggunaan property border-width sebagai berikut:
Contoh penggunaan property border-width CSS
<html>
<head>
<title></title>
<style type="text/css">
p{
border-style:solid;
border-color:blue;
border-width:10px;
}
</style>
</head>
<body>
<p>contoh border property di css</p>
</body>
</html>
Preview
contoh border property di css
Property border individual side
Dengan CSS kita bisa memberi border suatu element secara individu atau memberi border tertentu di sisi tertentu, atau kita juga bisa membedakan border element di sisi satu dengan sisi lainnya.
Contoh:
Contoh individu border property CSS
<html>
<head>
<title></title>
<style type="text/css">
p{
border-left:10px solid red;
border-top:10px solid green;
border-right:10px solid blue;
border-bottom:10px solid black;
}
</style>
</head>
<body>
<p>contoh border property di css</p>
</body>
</html>
contoh border property di css
Setelah kita memahami bagaimana cara penggunaan property border di CSS, tentunya penulisan CSS seperti di atas dapat kita sederhanakan. contoh penerapannya sebagai berikut:
Penyederhanaan penulisan property border
<html>
<head>
<title></title>
<style type="text/css">
p{
border:10px dotted red;
}
</style>
</head>
<body>
<p>contoh border property di css</p>
</body>
</html>
Preview
contoh border property di css