Za pomocą właściwości border-bottom oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dolnego obramowania interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
border-bottom:8px dotted blue;
}
/* REGUŁA - 2 */
div {
border-bottom-width:8px;
border-bottom-style:dotted;
border-bottom-color:blue;
}
- width
-
Składnik width nie jest wymaganym składnikiem grupy wartości właściwości border-bottom. Składnik width określa wartość właściwości border-bottom-width, czyli rozmiar grubości dolnego obramowania interesującego nas elementu HTML.
- style
-
Składnik style nie jest wymaganym składnikiem grupy wartości właściwości border-bottom. Składnik style określa wartość właściwości border-bottom-style, czyli styl dolnego obramowania interesującego nas elementu HTML.
- color
-
Składnik color nie jest wymaganym składnikiem grupy wartości właściwości border-bottom. Składnik color określa wartość właściwości border-bottom-color, czyli kolor dolnego obramowania interesującego nas elementu HTML.
border-bottom:6px solid blue;
do tego elementu "div" zostało dodane dolne obramowanie posiadające rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-bottom" wraz z następującą grupą wartości: "6px solid 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-bottom:6px solid blue;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
do tego elementu "div" zostało dodane dolne obramowanie posiadające rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-bottom" wraz z następującą grupą wartości: "6px solid blue"
</div>
</body>
</html>
