Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 9 : Cara Menggunakan Properti Table di CSS. Selanjutnya, kita akan belajar cara menggunakan properti border di CSS.
Properti border membantu Anda menentukan bagaimana betuk batas dari tepi kotak yang mewakili elemen harus terlihat.
Ada 3 properti border yang dapat Anda gunakan:
- border-color menentukan warna border.
- border-style menentukan apakah border berbentuk tegas, garis putus-putus, garis ganda, atau salah satu dari kemungkinan nilai lainnya.
- border-width menentukan lebar border.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh.
Properti border-color
Properti border-color memungkinkan Anda untuk mengubah warna border yang mengelilingi sebuah elemen. Anda dapat mengubah warna sisi bawah, kiri, atas, dan kanan batas elemen secara individual menggunakan properti :
- border-bottom-color mengubah warna batas bawah.
- border-top-color mengubah warna batas atas.
- border-left-color mengubah warna batas kiri.
- border-right-color mengubah warna batas kanan.
Contoh berikut menunjukkan efek dari semua properti ini :
<html>
<head>
<style type = "text/css">
p.contoh1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.contoh2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "contoh1">
Contoh ini menampilkan semua border dalam warna yang berbeda.
</p>
<p class = "contoh2">
Contoh ini menampilkan semua border dalam warna hijau saja.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Properti border-style
Properti border-style memungkinkan Anda untuk memilih salah satu dari border-style berikut :
- none – Tanpa border. (Setara dengan border-width : 0;)
- solid – Border dalam bentuk satu garis utuh.
- dotted – Border adalah serangkaian titik.
- dashed – Border adalah rangkaian garis pendek.
- double – Border adalah dua garis penuh.
- groove – Border tampak seperti diukir di halaman.
- ridge – Border terlihat kebalikan dari groove.
- inset – Border membuat kotak terlihat seperti tersemat di halaman.
- outset – Border membuat kotak terlihat seperti keluar dari kanvas.
- hidden – Border seperti tidak ada, kecuali dalam hal resolusi konflik border untuk elemen tabel.
Anda dapat mengubah border-style bawah, kiri, atas, dan kanan elemen secara individual menggunakan properti berikut :
- border-bottom-style mengubah gaya batas bawah.
- border-top-style mengubah gaya batas atas.
- border-left-style mengubah gaya batas kiri.
- border-right-style mengubah gaya batas kanan.
Contoh berikut menunjukkan semua border-style ini :
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
Ini adalah border tanpa lebar.
</p>
<p style = "border-width:4px; border-style:solid;">
Ini adalah solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
Ini adalah dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
Ini adalah double border.
</p>
<p style = "border-width:4px; border-style:groove;">
Ini adalah groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
Ini adalah ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
Ini adalah inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
Ini adalah outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
Ini adalah hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
Ini adalah border dengan 4 gaya yang berbeda.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Properti border-width
Properti border-width memungkinkan Anda untuk mengatur lebar boder sebuah elemen. Nilai properti ini bisa berupa panjang dalam px, pt atau cm atau diatur dengan nilai harus disetel menjadi thin, medium atau thick.
Anda dapat mengubah lebar border bawah, atas, kiri, dan kanan elemen menggunakan properti berikut :
- border-bottom-width mengubah lebar batas bawah.
- border-top-width mengubah lebar batas atas.
- border-left-width mengubah lebar batas kiri.
- border-right-width mengubah lebar batas kanan.
Contoh berikut menunjukkan semua lebar perbatasan ini :
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
Ini adalah solid border dengan lebar 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
Ini adalah solid border dengan lebar 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
Ini adalah solid border dengan lebar thin.
</p>
<p style = "border-width:medium; border-style:solid;">
Ini adalah solid border dengan lebar medium;
</p>
<p style = "border-width:thick; border-style:solid;">
Ini adalah solid border dengan lebar thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
Ini adalah border dengan 4 lebar yang berbeda.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Properti Border Menggunakan Shorthand
Properti border memungkinkan Anda menentukan warna, gaya, dan lebar garis dalam satu property.
Contoh berikut menunjukkan cara menggunakan ketiga properti ke dalam satu properti.
Ini adalah properti yang paling sering digunakan untuk mengatur border di sekitar elemen apa pun.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
Contoh ini menampilkan shorthand property untuk border.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan properti border di CSS untuk membentuk dokumen HTML.
