CSS svojstva

Granice

 

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;
}
CARNet