CSS lastnost border omogoča določitev slogov robov:
Da definirani lastnosti border-width in border-color dobita učinek, moramo predhodno definirati lastnost border-style.
border-style
Z oblikovno lastnostjo border-style določimo oblike vseh štirih robov. Za vrednost navedemo eno od naslednjih vrednosti:
| Vrednost | Pomen |
|---|---|
none |
ni roba, debelina roba je 0 |
hidden |
skriti rob |
dotted |
pikčasti rob |
dashed |
črtkasti rob |
solid |
neprekinjen rob |
double |
dvojni neprekinjen rob |
groove |
rob izgleda, kot da je vgraviran v podlago |
ridge |
rob izgleda, kot da je izbočen iz podlage |
inset |
element s tem robom izgleda, kot da je vgraviran v podlago |
outset |
element s tem robom izgleda, kot da je izbočen iz podlage |
<p class="none">To besedilo ima lastnost <em>border-style: <strong>none</strong></em>
<br />
<p class="hidden">To besedilo ima lastnost <em>border-style: <strong>none</strong></em>
<br />
....none { border-style: none }
.hidden { border-style: hidden }
.dotted { border-style: dotted }
...To besedilo ima lastnost border-style: none
To besedilo ima lastnost border-style: dotted
To besedilo ima lastnost border-style: dashed
To besedilo ima lastnost border-style: solid
To besedilo ima lastnost border-style: double
To besedilo ima lastnost border-style: groove
To besedilo ima lastnost border-style: ridge
To besedilo ima lastnost border-style: inset
To besedilo ima lastnost border-style: outset
border-width
Z oblikovno lastnostjo border-width določimo debeline vseh štirih robov. Za vrednost navedemo eno od naslednjih vrednosti:
| Vrednost | Pomen |
|---|---|
thin |
tanek rob |
medium |
srednje debel rob |
thick |
debel rob |
dolžina |
debelina roba v mm, cm, in, pt, pc, em, ex, px |
<p class="thin">To besedilo ima lastnost <em>border-width: <strong>thin</strong></em>
<br />
<p class="medium">To besedilo ima lastnost <em>border-width: <strong>medium</strong></em>
<br />
<p class="thick">To besedilo ima lastnost <em>border-width: <strong>thick</strong></em>
<br />
<p class="width1">To besedilo ima lastnost <em>border-width: <strong>1px</strong></em>
....thin { border-style: solid; border-width: thin }
.medium { border-style: solid; border-width: medium }
.thick { border-style: solid; border-width: thick }
.width1 { border-style: solid; border-width: 1px }
.width3 { border-style: solid; border-width: 3px }
.width5 { border-style: solid; border-width: 5px }
.width10 { border-style: solid; border-width: 10px }To besedilo ima lastnost border-width: thin
To besedilo ima lastnost border-width: medium
To besedilo ima lastnost border-width: thick
To besedilo ima lastnost border-width: 1px
To besedilo ima lastnost border-width: 3px
To besedilo ima lastnost border-width: 5px
To besedilo ima lastnost border-width: 10px
border-color
Z oblikovno lastnostjo border-color določimo barvo vseh štirih robov. Za vrednost navedemo eno od naslednjih vrednosti:
| Vrednost | Pomen |
|---|---|
transparent |
prozoren rob |
barva |
barva |
<p class="none">To besedilo ima lastnost <em>border-style: <strong>none</strong></em>
<br />
<p class="hidden">To besedilo ima lastnost <em>border-style: <strong>none</strong></em>
<br />
....none { border-style: none; border-color: #FB9400 }
.hidden { border-style: hidden; border-color: #FB9400 }
.dotted { border-style: dotted; border-color: #FB9400 }
...To besedilo ima lastnost border-style: none
To besedilo ima lastnost border-style: dotted
To besedilo ima lastnost border-style: dashed
To besedilo ima lastnost border-style: solid
To besedilo ima lastnost border-style: double
To besedilo ima lastnost border-style: groove
To besedilo ima lastnost border-style: ridge
To besedilo ima lastnost border-style: inset
To besedilo ima lastnost border-style: outset
border
Lastnost border uporabljamo kot bližnjico za nastavitev enake barve, oblike in širine vsem štirim robom. Na nek način je to bližnjica za nastavitev lastnosti border-style, border-width in border-color, a samo za primer, ko posamezni lastnosti nastavimo eno samo vrednost za vse štiri robove.
Za vrednost lastnosti border naštejemo vrednosti posameznih lastnosti robov v poljubnem vrstnem redu, pri čemer jih ločimo s presledki. Če vrednosti katere od lastnosti robov ne navedemo, bo dobila svojo privzeto vrednost.
<p class="robovi">Ta odstavek ima lastnost <em><strong>border: 5px solid #FB9400.robovi { border: 5px solid #fb9400 }Ta odstavek ima lastnost border: 5px solid #fb9400
Oblikovne lastnosti posameznega roba
CSS omogoča tudi določitev lastnosti vsakega roba posebaj. Pri tem lahko določimo različno obliko, debelino ali barvo posameznemu robu.
| Vrednost | Pomen |
|---|---|
border-left-style |
oblika levega roba |
border-right-style |
oblika desnega roba |
border-top-style |
oblika zgornjega roba |
border-bottom-style |
oblika spodnjega roba |
border-left-width |
debelina levega roba |
border-right-width |
debelina desnega roba |
border-top-width |
debelina zgornjega roba |
border-bottom-width |
debelina spodnjega roba |
border-left-color |
barva levega roba |
border-right-color |
barva desnega roba |
border-top-color |
barva zgornjega roba |
border-bottom-color |
barva spodnjega roba |
<p class="levi-rob">Ta odstavek ima lastnost <em><strong>border-left-style: solid</strong></em>.levi-rob { border-left-style: solid }Ta odstavek ima lastnost border-left-style: solid
Oblikovnim lastnostim border-style, border-width in border-color lahko določimo tudi več vrednosti:
- če navedemo eno vrednost, velja za vse štiri robove
- če navedemo dve vrednosti, velja prva za zgornji in spodnji, druga pa za levi in desni rob
- če navedemo tri vrednosti, velja prva za zgornji, druga za levi in desni, tretja pa za spodnji rob
- če navedemo štiri vrednosti, velja prva za zgornji, druga za desni, tretja za spodnji in četrta za levi rob
| Vrednost | Pomen |
|---|---|
border-style |
oblika enega, dveh, treh ali vseh robov |
border-width |
debelina enega, dveh, treh ali vseh robov |
border-color |
barva enega, dveh, treh ali vseh robov |
<p class="rob">Ta odstavek ima lastnost <em><strong>border-style: solid dotted</strong></em>.rob { border-style: solid dotted }Ta odstavek ima lastnost border-style: solid dotted
Za določitev oblikovnih lastnosti posameznega roba uporabimo lahko tudi bližnjice:
| Vrednost | Pomen |
|---|---|
border-left |
vse lastnosti levega roba |
border-right |
vse lastnosti desnega roba |
border-top |
vse lastnosti zgornjega roba |
border-bottom |
vse lastnosti spodnjega roba |
<p class="spodnji-rob">Ta odstavek ima lastnost <em><strong>border-bottom: 3px dashed #fb9400</strong></em>.spodnji-rob { border-bottom: 3px dashed #fb9400 }Ta odstavek ima lastnost border-bottom: 3px dashed #fb9400