|
CSS standard definira niz svojstava kojima je moguće opisati granicu elementa. Moguće ih je podijeliti u tri grupe: širina granice, boja granice i izgled granice.
Svojstva širine granice
Slično kao i kod prethodnih svojstava, i ovo se svojstvo dijeli na četiri položaja – gore, desno, dolje i lijevo.
div {
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;
border-style: solid;
border-color: #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
Ili za jednaku širinu svih četiriju granica:
div {
border-width: 2px;
}
Svojstva boje granice
Boja granice također se može definirati zasebno za svaku od četiri granice.
div {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-width: 6px;
border-style: solid;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
Ili za istu boju svih četiriju granica:
div {
border-color: red;
}
Svojstva izgleda granice
Svojstvo izgleda granice može poprimiti sljedeće vrijednosti: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Ponovno imamo mogućnost definicije za svaku od granica zasebno:
div {
border-top-style: none;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: solid;
border-width: 6px;
border-color: #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
Ili zajedničko svojstvo za sve četiri granice:
div {
border-style: dotted;
}
Skraćena svojstva granice
Sva navedena svojstva možemo postaviti skraćeno za pojedinačnu granicu:
div {
border-top: 2px solid #000;
border-right: 4px dotted red;
border-bottom: 6px dashed #fc0;
border-left: 6px groove #0c0;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
Ili jednako za sve četiri granice u jednoj definiciji:
div {
border: 2px dotted #000;
}
|
