CSS border-style adalah properti yang digunakan untuk menentukan gaya dari garis pembatas (border) pada elemen HTML.
CSS Border
CSS border adalah properti yang digunakan untuk menentukan garis pembatas (border) pada elemen HTML. kamu dapat menentukan garis pembatas dengan menggabungkan properti border-style, border-width, dan border-color.
Contoh: jika kamu ingin menambahkan garis pembatas solid dengan lebar 2px dan warna merah pada elemen dengan class "container", kamu dapat menambahkan kode berikut ke dalam CSS kamu:
.container {
border: 2px solid red;
}
kamu juga dapat menentukan garis pembatas untuk masing-masing sisi elemen dengan menggunakan properti border-top, border-right, border-bottom, dan border-left.
Misalnya, jika kamu ingin menambahkan garis pembatas putus-putus dengan lebar 1px dan warna hijau pada bagian atas elemen dengan class "container", kamu dapat menambahkan kode berikut ke dalam CSS kamu:
.container {
border-top: 1px dashed green;
}
Ada beberapa pilihan gaya yang tersedia, di antaranya adalah:
- none: tidak menampilkan garis pembatas sama sekali
- solid: garis pembatas yang solid (tebal)
- dotted: garis pembatas yang berbentuk titik-titik
- dashed: garis pembatas yang berbentuk garis putus-putus
- double: garis pembatas yang terdiri dari dua garis solid yang berdekatan
- groove: garis pembatas yang terlihat seperti diukir
- ridge: garis pembatas yang terlihat seperti terangkat
- inset: garis pembatas yang terlihat seperti tertanam
- outset: garis pembatas yang terlihat seperti terangkat
Kamu dapat menentukan gaya dari garis pembatas pada elemen HTML dengan menambahkan properti border-style ke dalam CSS elemen tersebut.
Misalnya, jika kamu ingin mengubah gaya garis pembatas pada elemen dengan class "container" menjadi dashed, kamu dapat menambahkan kode berikut ke dalam CSS:
.container {
border-style: dashed;
}
Kamu juga dapat menentukan gaya garis pembatas untuk masing-masing sisi elemen dengan menggunakan properti border-top-style, border-right-style, border-bottom-style, dan border-left-style.
Misalnya, jika kamu ingin mengubah gaya garis pembatas bagian atas elemen dengan class "container" menjadi solid, kamu dapat menambahkan kode berikut ke dalam CSS:
.container {
border-top-style: solid;
}
Secara umum, properti border-style sangat berguna untuk menambahkan estetika pada halaman web kamu dan memberikan batas yang jelas pada elemen HTML.
Baca juga: CSS Background Property dan Contohnya
CSS Border-Width
CSS border-width adalah properti yang digunakan untuk menentukan lebar dari garis pembatas (border) pada elemen HTML. Lebar dapat ditentukan dengan menggunakan ukuran px, em, atau persen.
Contoh: jika kamu ingin mengubah lebar garis pembatas pada elemen dengan class "container" menjadi 2px, kamu dapat menambahkan kode berikut ke dalam CSS :
.container {
border-width: 2px;
}
kamu juga dapat menentukan lebar garis pembatas untuk masing-masing sisi elemen dengan menggunakan properti border-top-width, border-right-width, border-bottom-width, dan border-left-width.
Misalnya, jika kamu ingin mengubah lebar garis pembatas bagian kiri elemen dengan class "container" menjadi 1px, kamu dapat menambahkan kode berikut ke dalam CSS kamu:
.container {
border-left-width: 1px;
}
CSS Border-Color
CSS border-color adalah properti yang digunakan untuk menentukan warna dari garis pembatas (border) pada elemen HTML. kamu dapat menentukan warna dengan menggunakan nama warna, hexadecimal, atau RGB.
Contoh: jika kamu ingin mengubah warna garis pembatas pada elemen dengan class "container" menjadi merah, kamu dapat menambahkan kode berikut ke dalam CSS kamu:
.container {
border-color: red;
}
kamu juga dapat menentukan warna garis pembatas untuk masing-masing sisi elemen dengan menggunakan properti border-top-color, border-right-color, border-bottom-color, dan border-left-color.
Misalnya, jika kamu ingin mengubah warna garis pembatas bagian bawah elemen dengan class "container" menjadi biru, kamu dapat menambahkan kode berikut ke dalam CSS kamu:
.container {
border-bottom-color: blue;
}
Secara umum, properti border sangat berguna untuk menambahkan estetika pada halaman web kamu dan memberikan batas yang jelas pada elemen HTML. kamu dapat dengan mudah mengubah gaya, lebar, dan warna garis pembatas dengan mengubah nilai dari properti ini.
