Zunanja obroba v CSS

Z lastnostjo outline določimo lastnosti zunanje obrobe, ki jo postavimo okrog HTML elementa zunaj robov.

LM - leva širina zunanje obrobe
LB - leva širina obrobe
LP - leva širina notranje obrobe
ŠIRINA ELEMENTA VSEBINA - širina vsebine
DP - desna širina notranje obrobe
DB - desna širina obrobe
DM - desna širina zunanje obrobe
SKUPNA ŠIRINA ELEMENTA = LM + LB + LP + ŠIRINA ELEMENTA VSEBINE + DP + DB + DM

outline-style

Z oblikovno lastnostjo outline-style določimo obliko obrobe. Za vrednost navedemo eno od naslednjih vrednosti:

Vrednost	Pomen
`none`	ni obrobe, debelina obrobe je 0
`dotted`	pikčasta obroba
`dashed`	črtkana obroba
`solid`	neprekinjena obroba
`double`	dvojna neprekinjena obroba
`groove`	obroba izgleda, kot da je vgravirana v podlago
`ridge`	obroba izgleda, kot da je izbočena iz podlage
`inset`	element s to obrobo izgleda, kot da je vgraviran v podlago
`outset`	element s to obrobo izgleda, kot da je izbočen iz podlage
`inherit`	vrednost podeduje od nadrejenega elementa

outline-width

Z oblikovno lastnostjo outline-width določimo debelino obrobe. Za vrednost navedemo eno od naslednjih vrednosti:

Vrednost	Pomen
`thin`	tanka obroba
`medium`	srednje debela obroba
`thick`	debela obroba
`dolžina`	debelina obrobe v mm, cm, in, pt, pc, em, ex, px
`inherit`	vrednost podeduje od nadrejenega elementa

outline-color

Z oblikovno lastnostjo outline-color določimo barvoobrobe. Za vrednost navedemo eno od naslednjih vrednosti:

Vrednost	Pomen
`invert`	nasprotna barva, kot je ozadje
`barva`	barva
`inherit`	vrednost podeduje od nadrejenega elementa

outline

Lastnost outline uporabljamo kot bližnjico za nastavitev vseh lastnosti obrobe:

Za vrednost lastnosti outline naštejemo vrednosti posameznih lastnosti roba v poljubnem vrstnem redu, pri čemer jih ločimo s presledki. Če vrednosti katere od lastnosti ozadja ne navedemo, bo dobila svojo privzeto vrednost.

<p class="obroba">Ta odstavek ima lastnost:<br /><em><strong> 
border: 10px solid #fb9400 <br />
margin: 20px <br />
padding: 10px <br />
outline: 10px solid #888888 <br /></strong></em></p>

.obroba { 
   border: 10px solid #fb9400;
   margin: 20px;
   padding: 10px;
   outline: 10px solid #888888;
}

Ta odstavek ima lastnost:
border: 10px solid #fb9400
margin: 20px;
padding: 10px;
outline: 10px solid #888888

Nazaj

Naprej