border-style Özelliği

border-style özelliği, kenarlık stilini tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. Aşağıdaki özellikler için bir kısaltma özelliğidir: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sözdizimi

seçici {
	border-style: değer;
}

Değerler

Değer	Açıklama
`solid`	Düz çizgi.
`dotted`	Noktalı kenarlık.
`dashed`	Kesik çizgili kenarlık.
`ridge`	Kabartılmış çizgi şeklinde kenarlık.
`double`	Çift çizgi şeklinde kenarlık. Etkiyi görebilmek için kenarlık kalınlığı en az `3px` olmalıdır.
`groove`	İçe doğru oyuk kenarlık.
`inset`	İçe gömülü kenarlık.
`outset`	Dışa kabartılmış kenarlık.
`none`	Kenarlık yok.

Varsayılan değer: none.

Değer Sayısı

Özellik, boşlukla ayrılmış olarak 1, 2, 3 veya 4 değer alabilir:

Sayı	Açıklama
`1`	Tüm taraflar için aynı tip.
`2`	İlk değer üst ve alt için, ikincisi - sol ve sağ kenarlıklar için.
`3`	İlk değer üst için, ikincisi - sol ve sağ kenarlıklar için, üçüncüsü - alt için.
`4`	İlk değer üst kenarlık için, ikincisi - sağ kenarlık için, üçüncüsü - alt kenarlık için, dördüncüsü - sol kenarlık için.

Örnek . solid Değeri

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

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

Örnek . dotted Değeri

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

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

Örnek . dashed Değeri

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

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

Örnek . ridge Değeri

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

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

Örnek . double Değeri

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

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

Örnek . groove Değeri

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

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

Örnek . inset Değeri

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

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

Örnek . outset Değeri

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

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

Örnek

Bu örnekte, öğenin farklı tarafları için farklı kenarlık tipleri belirlenmiştir:

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

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

Örnek

Şimdi ise öğenin farklı tarafları için farklı kenarlık kalınlığı ve rengi belirlenmiştir:

<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;
}

Örnek

Şimdi üst ve alt kenarlık için solid tipi, sağ ve sol kenarlık için ise dotted tipi belirlenmiştir:

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

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

Ayrıca Bakınız

border-color özelliği,
kenarlık rengini belirler
border-width özelliği,
kenarlık kalınlığını belirler
border özelliği,
kenarlık için kısaltma özelliğidir