V CSS obstajata dve različni vrsti obrob: border in outline. Medtem ko border označuje vedno pravokotno obrobo, so outline obrobe, uvedene v CSS2, namenjene nepravokotnim območjem. Obstaja še ena razlika: pri obrobi outline je obroba izven okvirja, zaradi česar lahko element hkrati dobi okvir z border ter obrobo z outline.
Opredelitve obrobov, predstavljene v tem vadniku, so zanimive predvsem za elemente, ki tvorijo lasten odstavek. V osnovi pa se lahko seveda uporabljajo tudi na druge elemente.
Opredelitev obrobe
Z border lahko določimo videz obrobe okoli elementa.
Splošna lastnost border je povzetek naslednjih vrednosti, na katere se bo podrobneje spregovorilo:
• barva-obrobe
• stil-obrobe
• debelina-obrobe
Vrednosti posameznih lastnosti se zapisujejo ločeno z presledkom. Vrstni red, v katerem se lastnosti navajajo, ni pomemben. Za border obstajajo tudi štiri podlastnosti, ki omogočajo določanje barve obrobe, debeline in tipa obrobe za posamezne strani elementa.
• border-zgoraj – obroba zgoraj
• border-desno – obroba desno
• border-spodaj – obroba spodaj
• border-levo – obroba levo
Slednji primer prikazuje uporabo border. S to opredelitvijo se ustvari 3 pik široka, črna in črtkana obroba.
<p style="border:3pt solid #000000;"> Dobrodošli </p>
Rezultat v brskalniku:
Barva obrobe
Z lastnostjo barva-obrobe se določi barva obrobe. Dovoljene so naslednje vrednosti:
• transparentno – prozorna obroba
• Barvna-vrednost
Če je navedena le ena vrednost, ta velja za vse strani obrobe. Da določite različne barve za posamezne strani, navedite več vrednosti, ločenih z presledkom.
• Dve vrednosti – prva vrednost za zgornjo in spodnjo, druga za levo in desno barvo obrobe.
• Tri vrednosti – prva vrednost za zgornjo, druga za levo in desno, tretja za spodnjo barvo obrobe.
• Štiri vrednosti – prva za vrh, druga za desno, tretja za spodnjo in četrta za levo barvo obrobe.
Prav tako se lahko uporabijo tudi naslednje podlastnosti border:
• barva-obrobe-zgoraj – barva obrobe zgoraj
• barva-obrobe-desno – barva obrobe desno
• barva-obrobe-spodaj – barva obrobe spodaj
• barva-obrobe-levo – barva obrobe levo
Primer:
<p style="barva-obrobe: #ffff00; debelina-obrobe: 3px; stil-obrobe: solid; polnilo: 2px"> PSD-Tutorials.de </p>
In tukaj je rezultat v brskalniku:
Vrsta linije
Z lastnostjo stil-obrobe lahko določite vrsto linije obrobe.
Spodaj je seznam možnosti vrste obrobe:
• brez – nevidna obroba
• pikasta – pikasta
• črtkana – črtkana
• trdna – črtkana
• dvojna – dvojna črtkana
• utor – 3D-linija
• hrib – 3D-linija
• vrezan – 3D-linija
• izstopajoč – 3D-linija
Tukaj je primer, kako izgledajo različne vrste obrob:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.brez {stil-obrobe:brez;}
p.pikasta {stil-obrobe:pikasta;}
p.črtkana {stil-obrobe:črtkana;}
p.trdna {stil-obrobe:trdna;}
p.dvojna {stil-obrobe:dvojna;}
p.utor {stil-obrobe:utor;}
p.hrib {stil-obrobe:hrib;}
p.vrezan {stil-obrobe:vrezan;}
p.izstopajoč {stil-obrobe:izstopajoč;}
p.skrito {stil-obrobe:skrito;}
</style>
</head>
<body>
<p class="brez">brez</p>
<p class="pikasta">pikasta</p>
<p class="črtkana">črtkana</p>
<p class="trdna">trdna</p>
<p class="dvojna">dvojna</p>
<p class="utor">utor</p>
<p class="hrib">hrib</p>
<p class="vrezan">vrezan</p>
<p class="izstopajoč">izstopajoč</p>
<p class="skrito">skrito</p>
</body>
</html>Rezultat v brskalniku:
Če navedete le eno vrednost, ta velja za vse strani obrobe. Za določitev različnih vrst obrob za posamezne strani navedite več vrednosti, ločenih z presledkom.
• Dve vrednosti – prva vrednost za zgornjo in spodnjo, druga za levo in desno vrsto obrobe.
• Tri vrednosti – prva vrednost za zgornjo, druga za levo in desno, tretja za spodnjo vrsto obrobe.
• Štiri vrednosti – prva za vrh, druga za desno, tretja za spodnjo in četrta za levo vrsto obrobe.
Prav tako se lahko uporabijo tudi naslednje podlastnosti border:
• stil-obrobe-zgoraj – vrsta obrobe zgoraj
• stil-obrobe-desno – vrsta obrobe desno
• stil-obrobe-spodaj – vrsta obrobe spodaj
• stil-obrobe-levo – vrsta obrobe levo
Tukaj je še en primer:
<p style="border-bottom-style: dashed;"> Črtkana obroba </p>
In takole izgleda v brskalniku:
Nastavitev širine obrobe
Z border-width se določi širina obrobe.
• Dolžinska navedba
• thin - tanjša obroba
• medium - zmerno močna obroba
• thick - debela obroba
Če je navedena samo ena vrednost, velja ta za vse strani elementa. Za določanje različnih debelin obrobe za posamezne strani obstajata dve možnosti. Pri prvem načinu se vpiše več vrednosti, ločenih z presledki.
• Dve vrednosti - prva vrednost za zgornjo in spodnjo, druga za levo in desno širino obrobe.
• Tri vrednosti - prva vrednost za zgornjo, druga za levo in desno, tretja za spodnjo širino obrobe.
• Štiri vrednosti - prva vrednost za zgornjo, druga za desno, tretja za spodnjo in četrta za levo širino obrobe.
Prav tako lahko uporabite tudi naslednje podlastnosti obrobe:
• border-top-width - debelina obrobe zgoraj
• border-right-width - debelina obrobe desno
• border-bottom-width - debelina obrobe spodaj
• border-left-width - debelina obrobe levo
Primer:
<p style="border-width:2px;border-style: dotted;"> Dobrodošli </p>
Barva obrobe za oris
Z lastnostjo outline-color se določi barva obrobe. Navedba je enaka kot pri lastnosti border-color.
• invert - barva je invertirana. Ta barva prekrije zamenjave vseh bitov šestnajstiške vrednosti barve.
• Barvna navedba
Primer:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Tako izgleda v brskalniku:
Vrsta obrobe za oris
Navedba outline-style določa vrsto obrobe. Dovoljene so iste vrednosti kot pri border-style.
• none - nevidna obroba
• dotted - pike
• dashed - črtkana
• solid - neprekinjena
• double - dvojna neprekinjena
• groove - 3D črta
• ridge - 3D črta
• inset - 3D črta
• outset - 3D črta
Primer:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Debelina obrobe za oris
Navedba outline-width je enaka kot border-width. Tudi s tem se določi debelina obrobe. Za ustvarjanje vidne meje obrobe se outline-width vedno kombinira z outline-style.
• medium - zmerno močna obroba
• thin - tanjša obroba
• thick - debela obroba
• Dolžinska navedba - določa debelino obrobe
Primer:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Dobrodošli
</p>
In tako kot pri obrobi obstaja tudi splošna lastnost za okvirje outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Dobrodošli na PSD-Tutorials.de!</p>
</body>
</html>
Te združujejo naslednje lastnosti:
• outline-width
• outline-style
• outline-color
Načelo je enako kot pri splošni lastnosti border.
