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