Kantlinjer - Border

När man infogar kantlinjer med CSS använder man sig av egenskapen border. Man kan infoga kantlinjer runt i stort sett vad som helst genom att knyta egenskaperna till de olika taggarna i stilmallen.

Inledning

Så här inledningsvis kan det vara bra att veta att bredden på en kantlinje enligt standard läggs till UTANFÖR det värde man angivit i width och height - det vill säga bredden och höjden - på ett element.

Ett element med höjd: 100 pixlar och bredd: 100 pixlar blir alltså 104 pixlar bred och hög med en kantlinje runtom på 2 pixlar... Det här gäller även den padding man tilldelar ett element.

Undantaget är tabeller där kantlinjer och padding hamnar INNANFÖR det värde man angivit i width och height. Läs mer om padding på nästa sida.

 Till Toppen 

Komprimerade Deklarationer

När man anger hur man vill att kantlinjer ska se ut finns det EN MASSA olika egenskaper att välja på - beroende på hur man vill att det ska se ut.

Border

Det vanligaste är kanske att man vill ha en kantlinje runtom ett element. Då kan man använda den komprimerade deklarationen border. Med egenskapen border anger man kantlinjens bredd, stil och färg runt ett element i en och samma deklaration.

Den här CSS-koden...

.kant {
border-width: 2px;
border-style: solid;
border-color: black;
}

...tolkas på precis samma sätt som den här:

.kant { border: 2px solid black;  }

Border-width

Med egenskapen border-width anger man kantlinjens bredd runt ett element i en och samma deklaration.

Så här om man villl ha samma bredd på kantlinjen runt om ett element:

.kant {
border-width: 2px;
}

Så här om man villl ha olika bredd på kantlinjen runt om ett element:

.kant {
border-width: 2px 0 2px 0;
}

Vilket enklare kan anges så här:

.kant {
border-width: 2px 0;
}

Border-style

Med egenskapen border-style anger man kantlinjens stil runt ett element i en och samma deklaration.

Så här om man villl ha samma stil på kantlinjen runt om ett element:

.kant {
border-style: solid;
}

Så här om man villl ha olika stil på kantlinjen runt om ett element:

.kant {
border-style: solid none solid none;
}

Vilket enklare kan anges så här:

.kant {
border-style: solid none;
}

Border-color

Med egenskapen border-color anger man kantlinjens färg runt ett element i en och samma deklaration.

Så här om man villl ha samma färg på kantlinjen runt om ett element:

.kant {
border-color: black;
}

Så här om man villl ha olika färg på kantlinjen runt om ett element:

.kant {
border-color: black gray black gray;
}

Vilket enklare kan anges så här:

.kant {
border-style: black gray;
}
 Till Toppen 

Bredd, Stil & Färg

En kantlinjes bredd kan anges antingen ett mått som till exempel pixlar eller egenskaperna: thin, medium eller thick.

När det gäller de olika stilarna på kantlinjer kan man välja på: solid, dashed, dotted, double, groove, ridge, inset, outset och none (ingen).

Att bestämma färg på kantlinjen går till på samma sätt som när man anger till exempel bakgrundsfärg eller färg på text.

EXEMPEL

I exemplen nedan skapas kantlinjerna runt en tabell med en klass.

Så här skrivs klassen in i stilmallen:

.kant { border: 2px solid #014D73; }

Så här anropas klassen i HTML-koden:

<table class="kant">
<tr>
<td>Tabell med kantlinje</td>
</tr>
</table>

Solid

.kant { border: 2px solid #014D73; }

Dashed

.kant { border: 2px dashed #014D73; }

Dotted

.kant { border: 2px dotted #014D73; }

Double
För att få en dubbel kantlinje måste pixelantalet i koden vara minst "det dubbla + 1" för att kanterna och mellanrummet ska få plats. Skulle man skriva 2 pixlar skulle det bara bli en linje. Minsta antalet pixlar för en dubbel linje är alltså 3:


.kant { border: 3px double #014D73; }

En dubbel linje med 2 pixlar i varje linje måste alltså ha minst 5 i koden:

.kant { border: 5px double #014D73; }

För varje pixel du lägger till utöver det ökas först mellanrummet mellan linjerna, sedan yttre linjen och sist inre linjen. I Internet Explorer vill säga... Det ser lite olika ut i olika webbläsare. I Netscape och Mozilla ökas mellanrummet tills pixelantalet räcker för att göra båda linjerna tjockare. Så tänk till när du väljer antal så att det ser likadant ut i alla... ( t.ex. 3, 5, 6 )


.kant { border: 6px double #014D73; }
.kant { border: 7px double #014D73; }
.kant { border: 8px double #014D73; }

Groove, Ridge, Inset, Outset


.kant { border: 8px groove #014D73; }
.kant { border: 8px ridge #014D73; }
.kant { border: 8px inset #014D73; }
.kant { border: 8px outset #014D73; }

Observera att de ovanstående kantstilarna kommer att se lite olika ut i olika webbläsare!

 Till Toppen 

Variera!

Man behöver inte alls ha kanter runtom HELA tabellen eller stycket eller vad man nu väljer att ha en kantlinje runt.

Exempel 1

En klass med kant över och under:

.kant {
border-style: solid;
border-color: #014D73;
border-width: 2px 0px;
}

Tabell med kantlinje över och under

Exempel 2

En klass med kant på sidorna:

.kant
{
border-style: double;
border-color: #014D73;
border-width: 0px 5px;
}

Tabell med kantlinje på sidorna

Exempel 3

Det går också bra att blanda hej vilt...

.tuttifrutti {
border-style: double solid dotted dashed;
border-color: blue red green black;
border-width: 5px 4px 3px 2px;
}

Tuttifrutti-Tabell

Japp! Så ser det ut. Inte så snyggt kanske - men du fattar principen, va?

 Till Toppen 

Kantlinjer på tabeller

För att åstadkomma en tabell-layout som den nedan kan man gå till väga på olika sätt. Nedan följer två exempel. Det första exemplet är väldigt smidigt och det andra lite mer omständigt.

Exempel 2 kan vara att föredra om man vill att äldre webbläsare ska visa kantlinjerna som det är tänkt. Men tekniken i Exempel 1 stöds numer av de flesta "moderna" webbläsare.



TabellcellTabellcellTabellcell
TabellcellTabellcellTabellcell
TabellcellTabellcellTabellcell

Exempel 1

Det smidigaste sättet att åstadkomma kantlinjerna som i tabellen ovan är att använda: border-collapse: collapse - vilket automatiskt "slår ihop" kantlinjerna på tabell-cellerna så att de inte krockar och blir dubbelt så tjocka.


Skriv in klasserna i stilmallen så här:

.tabell {
border-collapse: collapse;
border: 5px double #014D73; }

.tabell td {
border: 2px solid #014D73;
padding: 10px;
}

Så här skrivs tabellen i HTML-koden:

<table class="tabell">
<tr>
<td>Tabellcell</td>
<td>Tabellcell</td>
<td>Tabellcell</td>
</tr>
<tr>
<td >Tabellcell</td>
<td>Tabellcell</td>
<td>Tabellcell</td>
</tr>
<tr>
<td>Tabellcell</td>
<td>Tabellcell</td>
<td>Tabellcell</td>
</tr>
</table>

Exempel 2

För att få till kantlinjerna utan att använda border-collapse - skapas fyra olika klasser som anropas från både tabellen och tabellens celler.

Några av cellerna måste ha olika koder för att inte cellernas kantlinjer ska "krocka" med tabellens. Första cellen i sista raden behöver ingen kantlinje alls...

Skriv in klasserna i stilmallen så här:

.tabellkant { border: 5px double #014D73; }

.cellkant1
{
border-color: #014D73;
border-style: solid;
border-width: 0 0 2px 0;
}

.cellkant2
{
border-color: #014D73;
border-style: solid;
border-width: 0 0 2px 2px;
}

.cellkant3
{
border-color: #014D73;
border-style: solid;
border-width: 0 0 0 2px;
}

Så här skrivs tabellen i HTML-koden:

<table class="tabellkant" cellpadding="10">
<tr>
<td class="cellkant1">Tabellcell</td>
<td class="cellkant2">Tabellcell</td>
<td class="cellkant2">Tabellcell</td>
</tr>
<tr>
<td class="cellkant1">Tabellcell</td>
<td class="cellkant2">Tabellcell</td>
<td class="cellkant2">Tabellcell</td>
</tr>
<tr>
<td>Tabellcell</td>
<td class="cellkant3">Tabellcell</td>
<td class="cellkant3">Tabellcell</td>
</tr>
</table>
 Till Toppen 

Alla Egenskaper

Ja, jo, som sagt... Det finns en hel del olika egenskaper att använda sig av när man anger kantlinjer. Här är allihopa!

Egenskap Förklaring Värden
border Komprimerad deklaration för att ange alla egenskaper för de fyra kanterna tillsammans bredd
style
färg
border-bottom Komprimerad deklaration för att ange alla egenskaper för den undre kanten tillsammans bredd
stil
färg
border-bottom-color Anger färgen på den undre kanten färg
border-bottom-style Anger stilen på den undre kanten stil
border-bottom-width Anger bredden på den undre kanten thin
medium
thick

mått
border-color Anger färgen på de fyra kanterna, en till fyra färger färg
border-left Komprimerad deklaration för att ange alla egenskaper för den vänstra kanten tillsammans bredd
stil
färg
border-left-color Anger färgen på den vänstra kanten färg
border-left-style Anger stilen på den vänstra kanten stil
border-left-width Anger bredden på den vänstra kanten thin
medium
thick

mått
border-right Komprimerad deklaration för att ange alla egenskaper för den högra kanten tillsammans bredd
stil
färg
border-right-color Anger färgen på den högra kanten färg
border-right-style Anger stilen på den högra kanten stil
border-right-width Anger bredden på den högra kanten thin
medium
thick

mått
border-style Anger stilen på de fyra kanterna, en till fyra stilar dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
border-top Komprimerad deklaration för att ange alla egenskaper för den övre kanten tillsammans bredd
stil
färg
border-top-color Anger färgen på den övre kanten färg
border-top-style Anger stilen på den övre kanten stil
border-top-width Anger bredden på den övre kanten thin
medium
thick

mått
border-width Komprimerad deklaration för att ange bredden på alla fyra kanterna tillsammans, en till fyra värden thin
medium
thick

mått

Källa: w3schools

 Till Toppen