Za pomocą właściwości border-color oraz z góry zdefiniowanej grupy wartości możemy określić kolor obramowania jednocześnie po kilku stronach interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
border-color:red green blue yellow;
}
/* REGUŁA - 2 */
div {
border-top-color:red;
border-right-color:green;
border-bottom-color:blue;
border-left-color:yellow;
}
- top
-
Składnik top jest wymaganym składnikiem grupy wartości właściwości border-color. Składnik top określa wartość właściwości border-top-color, czyli kolor górnego obramowania interesującego nas elementu HTML.
- right
-
Składnik right jest wymaganym składnikiem grupy wartości właściwości border-color. Składnik right określa wartość właściwości border-right-color, czyli kolor prawego obramowania interesującego nas elementu HTML.
- bottom
-
Składnik bottom jest wymaganym składnikiem grupy wartości właściwości border-color. Składnik bottom określa wartość właściwości border-bottom-color, czyli kolor dolnego obramowania interesującego nas elementu HTML.
- left
-
Składnik left jest wymaganym składnikiem grupy wartości właściwości border-color. Składnik left określa wartość właściwości border-left-color, czyli kolor lewego obramowania interesującego nas elementu HTML.
border-color:red blue;
kolorem górnego oraz dolnego obramowania tego elementu "div" jest kolor czerwony, natomiast kolorem prawego oraz lewego obramowania tego elementu "div" jest kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-color" wraz z następującą grupą wartości: "red blue"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
border-width:10px;
border-style:solid;
border-color:red blue;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
kolorem górnego oraz dolnego obramowania tego elementu "div" jest kolor czerwony, natomiast kolorem prawego oraz lewego obramowania tego elementu "div" jest kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-color" wraz z następującą grupą wartości: "red blue"
</div>
</body>
</html>
