Border-width häsiýeti

border-width häsiýeti hemme tarap üçin bir wagtyň özünde ýa-da her tarap üçin aýratyn serhediň galyňlygyny kesgitleýär. Bu häsiýet border-left-width, border-right-width, border-top-width, border-bottom-width häsiýetleri üçin gysgaldylan häsiýetdir.

Häsiýetiň bahasy hökmünde göterimlerden başga ölçeg birlikleri ulanylyp bilner, ýa-da-da thin (serhed 2 pikselde), medium (serhed 4 pikselde) ýa-da thick (serhed 6 pikselde) ýaly açar sözler ulanylyp bilner. Bellenen görnüşi: medium.

Sintaksis

selektor {
	border-width: 1, 2, 3 ýa-da 4 baha;
}

Baha sany

Häsiýet 1, 2, 3 ýa-da 4 bahany kabul edip biler, bosluk bilen bellenen:

Sany	Düşündiriş
`1`	Hemme tarap üçin birmeňzeş görnüş.
`2`	Birinci baha ýokarky we aşaky üçin, ikinjisi - çep we sag serhetler üçin.
`3`	Birinci baha ýokarky üçin, ikinjisi - çep we sag serhetler üçin, üçünjisi - aşaky üçin.
`4`	Birinci baha ýokarky serhet üçin, ikinjisi - sag serhet üçin, üçünjisi - aşaky serhet üçin, dördünjisi - çep serhet üçin.

Mysal

Bir piksel galyňlygynda serhed belgiýäris:

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

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

Mysal

4 piksel galyňlygynda serhed belgiýäris:

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

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

Mysal

Ýokarky we aşaky serhediň galyňlygyny 1px, çep we sag serhediň galyňlygyny bolsa 4px belgiýäris:

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

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

Mysal

Ýokarky serhediň galyňlygyny 1px, çep we sag serhediň galyňlygyny 4px, aşaky serhediň galyňlygyny bolsa 6px belgiýäris:

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

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

Mysal

Ýokarky serhediň galyňlygyny 1px, sag serhediň galyňlygyny 4px, aşaky serhediň galyňlygyny - 6px, çep serhediň galyňlygyny bolsa 8px belgiýäris:

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

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

Mysal

thin açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Mysal

medium açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Mysal

thick açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Mysal

Har tarap üçin dürli serhed belgiýäris:

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

Şeýle-de göz aýlaň

border-style häsiýeti,
serhediň görnüşini kesgitleýär
border-color häsiýeti,
serhediň rengini kesgitleýär
border häsiýeti,
serhed üçin gysgaldylan häsiýetdir