Za pomocą właściwości border-width oraz z góry zdefiniowanej grupy wartości możemy określić rozmiar grubości obramowania jednocześnie po kilku stronach interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
border-width:4px 8px 12px 16px;
}
/* REGUŁA - 2 */
div {
border-top-width:4px;
border-right-width:8px;
border-bottom-width:12px;
border-left-width:16px;
}
- top
-
Składnik top jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik top określa wartość właściwości border-top-width, czyli rozmiar grubości górnego obramowania interesującego nas elementu HTML.
- right
-
Składnik right jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik right określa wartość właściwości border-right-width, czyli rozmiar grubości prawego obramowania interesującego nas elementu HTML.
- bottom
-
Składnik bottom jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik bottom określa wartość właściwości border-bottom-width, czyli rozmiar grubości dolnego obramowania interesującego nas elementu HTML.
- left
-
Składnik left jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik left określa wartość właściwości border-left-width, czyli rozmiar grubości lewego obramowania interesującego nas elementu HTML.
border-width:5px 10px;
rozmiar grubości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar grubości prawego oraz lewego obramowania tego elementu "div" wynosi 10 pikseli, ponieważ do tego elementu "div" została dodana właściwość "border-width" wraz z następującą grupą wartości: "5px 10px"
<!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:5px 10px;
border-style:solid;
border-color:black;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar grubości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar grubości prawego oraz lewego obramowania tego elementu "div" wynosi 10 pikseli, ponieważ do tego elementu "div" została dodana właściwość "border-width" wraz z następującą grupą wartości: "5px 10px"
</div>
</body>
</html>
