CSS border berfungsi untuk memberikan border kedalam sebuah elemen. Dengan border kita bisa menentukan style, lebar, dan warna dari border.
Cara menggunakannya adalah dengan property: border
Daftar Isi
Format value misalnya 1px solid #000 dimana 1px adalah ketebalan border, solid adalah type bordernya, dan #000 adalah warna border.
Langsung saja liat contoh di bawah ini:
div {
border: 1px solid #000
}
Hasil dari kode di atas kira-kira menjadi seperti dibawah ini:
Div dengan: border: 1px solid #000
Ada beberapa pilihan border-style yang bisa kamu coba:
- dotted - Mendifinisikan dotted border
- dashed - Mendifinisikan dashed border
- solid - Mendifinisikan solid border
- double - Mendifinisikan double border
- groove - Mendifinisikan 3D grooved border. Efeknya tergantung border-color value
- ridge - Mendifinisikan3D ridged border. Efeknya tergantung border-color value
- inset - Mendifinisikan 3D inset border. Efeknya tergantung border-color value
- outset - Mendifinisikan 3D outset border. Efeknya tergantungborder-color value
- none - Mendifinisikan no border
- hidden - Mendifinisikan hidden
Contoh dari masing-masing border-style:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Hasilnya adalah:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
Nah itulah pembahasan tentang properti border dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang border dalam css.
Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS
