Border-color қасиеті

border-color қасиеті барлық жақтардың шекара түсін бір уақытта немесе әр жақ үшін жеке белгілейді. Қасиеттің мәні ретінде ⁅a href="/kk/markup/manual/css/reference/units/colors/"⁆түс бірліктерінің⁅/a⁆ кез келген түрі қолданылады. Әдепкі мән: блок мәтінінің түсі сияқты.

Қасиет мына қасиеттер үшін қысқартылған қасиет болып табылады: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтаксис

селектор {
	border-color: түс;
}

Мәндер саны

Қасиет 1, 2, 3 немесе 4 мәндерді бос орын арқылы көрсете отырып қабылдай алады:

Саны	Сипаттама
`1`	Барлық жақтар үшін бір уақытта түр.
`2`	Бірінші мән үстіңгі және астыңғы жақтар үшін, екінші - сол және оң жақ шекаралар үшін.
`3`	Бірінші мән үстіңгі жақ үшін, екінші - сол және оң жақ шекаралар үшін, үшінші - астыңғы жақ үшін.
`4`	Бірінші мән үстіңгі шекара үшін, екінші - оң жақ үшін, үшінші - астыңғы үшін, төртінші - сол жақ шекара үшін.

Мысал

Блок шекарасын қызыл түске бояйық:

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

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

Мысал

Үстіңгі және астыңғы жақтар үшін қызыл шекараны, ал оң және сол жақтар үшін көк шекараны белгілейік:

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

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

Мысал

Үстіңгі жақ үшін қызыл шекараны, оң жақ үшін көк, астыңғы үшін жасыл, сол жақ үшін қара шекараны белгілейік:

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

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

Мысал

Қалыңдық, түр және шекара түсін бір уақытта әртүрлі етіп белгілейік:

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

Мысал

Егер шекара түсі border-color-те белгіленбесе - ол color қасиетінен алынады:

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

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

Сондай-ақ қараңыз

border-width қасиеті,
ол шекара қалыңдығын белгілейді
border-style қасиеті,
ол шекара түрін белгілейді
border қасиеті,
ол шекара үшін қысқартылған қасиет болып табылады