Robovi v CSS

Robovi so pomemben del oblikovanja elementov v CSS. Z njimi lahko poudarimo posamezne dele strani, ločimo vsebinske sklope ali naredimo element bolj opazen. Lastnost border in z njo povezane lastnosti omogočajo določanje sloga, debeline in barve robov.

Pomni: Da je rob viden, mora biti določen njegov slog. Sami lastnosti border-width in border-color še ne zadoščata, če je slog roba none.

Osnovna pravila

Rob obdaja vsebino in notranji odmik elementa.
Pri robu nas najpogosteje zanimajo tri lastnosti: slog, debelina in barva.
Za vse štiri robove hkrati lahko uporabimo bližnjico border.
Za posamezen rob lahko uporabimo posebne lastnosti, na primer border-left ali border-bottom.
Rob je lahko raven, črtkan, pikčast, dvojni ali navidezno vdrt oziroma izbočen.

Pozor: Pretirano močni ali predebeli robovi lahko zmanjšajo preglednost strani. Rob naj poudarja element, ne pa da prevlada nad njegovo vsebino.

border-style

Z lastnostjo border-style določimo slog vseh štirih robov. Lastnost lahko prejme eno, dve, tri ali štiri vrednosti. Če navedemo več vrednosti, se te porazdelijo med posamezne stranice roba. Lastnost border-style je bližnjica za štiri posamezne lastnosti sloga robov.

Vrednost	Pomen
`none`	ni roba, debelina roba je 0
`hidden`	skriti rob
`dotted`	pikčasti rob
`dashed`	črtkani rob
`solid`	neprekinjen rob
`double`	dvojni neprekinjen rob
`groove`	rob deluje vdrto
`ridge`	rob deluje izbočeno
`inset`	element deluje vdrto
`outset`	element deluje izbočeno

<p class="none">To besedilo ima lastnost <em>border-style: <strong>none</strong></em></p>
<p class="hidden">To besedilo ima lastnost <em>border-style: <strong>hidden</strong></em></p>
<p class="dotted">To besedilo ima lastnost <em>border-style: <strong>dotted</strong></em></p>
...

.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: hidden

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

Pomni: Če pri border-style navedemo dve vrednosti, velja prva za zgornji in spodnji rob, druga pa za levi in desni rob. Pri štirih vrednostih velja vrstni red zgoraj, desno, spodaj, levo.

border-width

Z lastnostjo border-width določimo debelino vseh štirih robov. Uporabimo lahko ključne besede thin, medium, thick ali pa določimo natančno debelino, na primer v px, em ali rem.

Vrednost	Pomen
`thin`	tanek rob
`medium`	srednje debel rob
`thick`	debel rob
`debelina`	debelina roba, na primer v px, em ali rem

<p class="thin">To besedilo ima lastnost <em>border-width: <strong>thin</strong></em></p>
<p class="medium">To besedilo ima lastnost <em>border-width: <strong>medium</strong></em></p>
<p class="thick">To besedilo ima lastnost <em>border-width: <strong>thick</strong></em></p>
<p class="width1">To besedilo ima lastnost <em>border-width: <strong>1px</strong></em></p>
...

.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 lastnostjo border-color določimo barvo vseh štirih robov. Če barve posebej ne določimo, se praviloma uporabi vrednost currentColor, torej trenutna barva besedila elementa.

Vrednost	Pomen
`transparent`	prozoren rob
`barva`	barva roba

<p class="dotted">To besedilo ima lastnost <em>border-color: <strong>#FB9400</strong></em></p>
<p class="solid">To besedilo ima lastnost <em>border-color: <strong>#FB9400</strong></em></p>
...

.dotted { border-style: dotted; border-color: #FB9400; }
.solid { border-style: solid; border-color: #FB9400; }
.double { border-style: double; border-color: #FB9400; }
...

To besedilo ima lastnost border-style: none

To besedilo ima lastnost border-style: hidden

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

Pozor: Če uporabimo barvo roba brez ustreznega sloga roba, sprememba ne bo vidna. Pri razlagi robov je zato vedno smiselno povezati slog, debelino in barvo.

border

Lastnost border uporabljamo kot bližnjico za nastavitev debeline, sloga in barve roba za vse štiri strani hkrati. Vrednosti lahko zapišemo v poljubnem vrstnem redu, saj vrstni red ni predpisan. Kljub temu je dobra praksa, da najprej določimo debelino roba, nato slog oziroma tip črte in na koncu še barvo roba, ker je tak zapis bolj pregleden.

Če katere od teh vrednosti ne navedemo, se uporabi njena privzeta nastavitev. Lastnost border ne določa lastnosti border-image, ampak jo ponastavi na začetno vrednost.

<p class="robovi">Ta odstavek ima lastnost <em><strong>border: 5px solid #FB9400</strong></em></p>

.robovi { border: 5px solid #FB9400; }

Ta odstavek ima lastnost border: 5px solid #FB9400

V sodobni praksi rob pogosto dopolnjujemo še z lastnostjo border-radius, ki omogoča zaobljene vogale. Element je lahko zaobljen tudi, če rob ni posebej viden.

.robovi-zaobljeni {
   border: 5px solid #FB9400;
   border-radius: 12px;
}

Če pri bližnjici border ne določimo sloga roba, rob praviloma ne bo viden, saj je privzeta vrednost lastnosti border-style nastavljena na none. Privzeta barva roba je currentColor, privzeta debelina pa medium.

Oblikovne lastnosti posameznega roba

CSS omogoča tudi določitev lastnosti vsakega roba posebej. Tako lahko levemu, desnemu, zgornjemu in spodnjemu robu določimo različen slog, debelino ali barvo. Poleg fizičnih lastnosti so na voljo tudi logične različice, ki se prilagodijo smeri pisanja.

Vrednost	Pomen
`border-left-style`	slog levega roba
`border-right-style`	slog desnega roba
`border-top-style`	slog zgornjega roba
`border-bottom-style`	slog 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></p>

.levi-rob { border-left-style: solid; }

Ta odstavek ima lastnost border-left-style: solid

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`	slog 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></p>

.rob { 
   border-style: solid dotted;
   border-width: 3px;
   border-color: #FB9400;
}

Ta odstavek ima lastnost border-style: solid dotted

Za določitev lastnosti posameznega roba lahko uporabimo 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></p>

.spodnji-rob { border-bottom: 3px dashed #FB9400; }

Ta odstavek ima lastnost border-bottom: 3px dashed #FB9400

Pomni: Če želiš enak rob na vseh straneh, je običajno najbolj pregledna izbira bližnjica border. Če pa želiš poudariti samo eno stran elementa, uporabi na primer border-left ali border-bottom.

Sodobni CSS poleg fizičnih lastnosti, kot so border-left, border-right, border-top in border-bottom, pozna tudi logične lastnosti, kot so border-inline, border-inline-color, border-block-style in podobne. Te so posebej uporabne pri različnih smereh pisanja in večjezičnih postavitvah.

Priporočila

Pri oblikovanju robov najprej določi, ali želiš poudariti vse strani elementa ali samo posamezen rob.
Za enoten rob okoli elementa uporabi bližnjico border.
Pri bolj sodobnem videzu lahko rob dopolniš z lastnostjo border-radius.
V večjezičnih ali prilagodljivih postavitvah razmisli o uporabi logičnih lastnosti robov.

Pogoste napake

Določena sta debelina in barva roba, slog roba pa ni določen, zato rob ni viden.
Več vrednosti pri lastnostih robov se razlaga v napačnem vrstnem redu.
Lastnost border se uporablja tam, kjer bi bilo zaradi preglednosti primerneje določiti samo en rob.
Rob je oblikovan tako izrazito, da oslabi preglednost vsebine.

Nazaj

Naprej