Properti border-style

Properti border-style mengatur gaya border untuk semua sisi secara bersamaan atau terpisah untuk setiap sisi. Merupakan properti shorthand untuk properti berikut: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksis

selektor {
	border-style: nilai;
}

Nilai

Nilai	Deskripsi
`solid`	Garis padat.
`dotted`	Border berupa titik-titik.
`dashed`	Border berupa garis putus-putus.
`ridge`	Border berupa garis timbul.
`double`	Border berupa garis ganda. Untuk melihat efeknya, ketebalan border harus minimal `3px`.
`groove`	Border cekung.
`inset`	Border tertekan.
`outset`	Border menonjol.
`none`	Tidak ada border.

Nilai default: none.

Jumlah Nilai

Properti dapat menerima 1, 2, 3 atau 4 nilai, yang ditentukan dengan spasi:

Jumlah	Deskripsi
`1`	Tipe untuk semua sisi secara bersamaan.
`2`	Nilai pertama untuk atas dan bawah, kedua - untuk border kiri dan kanan.
`3`	Nilai pertama untuk atas, kedua - untuk border kiri dan kanan, ketiga - untuk bawah.
`4`	Nilai pertama untuk border atas, kedua - untuk kanan, ketiga - untuk bawah, keempat - untuk border kiri.

Contoh . Nilai solid

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai dotted

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai dashed

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai ridge

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai double

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai groove

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai inset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh . Nilai outset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh

Dalam contoh ini, berbagai tipe border ditetapkan untuk sisi elemen yang berbeda:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Contoh

Dan sekarang untuk sisi elemen yang berbeda juga ditetapkan ketebalan border dan warnanya yang berbeda:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Contoh

Sekarang untuk border atas dan bawah ditetapkan tipe solid, dan untuk kanan dan kiri - dotted:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Lihat juga

properti border-color,
yang mengatur warna border
properti border-width,
yang mengatur ketebalan border
properti border,
yang merupakan properti shorthand untuk border