I CSS finns två olika typer av ramar med border och outline. Medan border alltid representerar en rektangulär ram, är de introducerade outline-ramarna i CSS2 tänkta för icke-inkiga områden. Och det finns även en annan skillnad: Med outline är omkretsen utanför ramen, vilket gör att ett element kan tilldelas både en ram med border och en omkrets med outline.
De rambeskrivningar som presenteras i denna handledning är främst intressanta för de element som utgör en egen paragraf. Men i princip kan de självklart också appliceras på andra element.
Definiera ramar
Med border kan utseendet på hela ramen runt ett element bestämmas.
Den generella border-egenskapen är en sammanfattning av följande värden, som kommer att beskrivas utförligt nedan:
• border-color
• border-style
• border-width
Värdena för de enskilda egenskaperna anges med mellanslag emellan. Ordningen där egenskaperna anges spelar ingen roll. För border finns även fyra underegenskaper, genom vilka färg, tjocklek och typ av ram kan specificeras för enskilda elementsidor.
• border-top – ram överst
• border-right – ram till höger
• border-bottom – ram nederst
• border-left – ram till vänster
Följande exempel visar användningen av border. Genom denna definition skapas en ram som är tre punkter bred, svart och skärt genomdragen.
<p style="border:3pt solid #000000;"> Välkommen </p>
Resultatet i webbläsaren:
Ramfärg
Genom border-color bestäms ramens färg. Följande värden är tillåtna:
• transparent – transparent ram
• Färgvärde
Om endast ett värde anges gäller det för alla ramssidor. För att definiera olika färger för de enskilda sidorna anger man flera värden, åtskilda av mellanslag.
• Två värden – det första värdet för över- och undersidan, det andra för vänster- och höger färg.
• Tre värden – det första för överdelen, det andra för vänster- och högra, det tredje för nedre färgen.
• Fyra värden – första värdet för överdelen, det andra för höger, det tredje för nedan och det fjärde för den vänstra ramfärgen.
Samma vägen kan även följande border-underegenskaper användas:
• border-top-color – ramfärg överst
• border-right-color – ramfärg till höger
• border-bottom-color – ramfärg nederst
• border-left-color – ramfärg till vänster
Ett exempel:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.se </p>
Och här är resultatet i webbläsaren:
Linjearten
Genom border-style kan linjearten på ramen bestämmas.
Här nedanför finns en lista över möjliga ramlösningar:
• none – osynlig ram
• dotted – prickad
• dashed – streckad
• solid – heldragen
• double – dubbeldragen
• groove – 3D-linje
• ridge – 3D-linje
• inset – 3D-linje
• outset – 3D-linje
Här är ett exempel på hur ramtyperna ser ut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.se</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Resultatet i webbläsaren:
Om man endast anger ett värde gäller det för alla ramsidor. För att definiera ramtyper för de enskilda sidorna anger man flera värden, åtskilda av mellanslag.
• Två värden – det första värdet för över- och undersidan, det andra för vänster- och höger ramtyp.
• Tre värden – det första för överdelen, det andra för vänster- och högra, det tredje för nedre ramtypen.
• Fyra värden – första värdet för överdelen, det andra för höger, det tredje för nedan och det fjärde för den vänstra ramtypen.
På samma sätt kan även följande border-underegenskaper användas:
• border-top-style – ramtyp överst
• border-right-style – ramtyp till höger
• border-bottom-style – ramtyp nederst
• border-left-style – ramtyp till vänster
Också här är ett exempel:
<p style="border-bottom-style: dashed;"> Prickad ram </p>
Och så här ser det ut i webbläsaren:
Ange ramens bredd
Genom border-width bestäms ramens bredd.
• Angivelse av längd
• tunn – tunn ram
• medium – medeltjock ram
• tjock – tjock ram
Om endast ett värde anges, gäller det för alla sidor på elementet. För att ange olika ramtjocklekar för enskilda sidor finns det två alternativ. I den första varianten skrivs flera värden åtskilda av mellanslag.
• Två värden – första värdet för över- och underram, andra värdet för vänster- och högerram.
• Tre värden – första värdet för överram, andra för vänster- och högerram, tredje för underram.
• Fyra värden – första värde för övrigt, andra för höger, tredje för undre och fjärde för vänster ramtjocklek.
Precis som med border-egenskaperna kan ni också använda följande border-underegenskaper:
• border-top-width – ramtjocklek överst
• border-right-width – ramtjocklek till höger
• border-bottom-width – ramtjocklek nedtill
• border-left-width – ramtjocklek till vänster
Ett exempel:
<p style="border-width:2px;border-style: dotted;"> Välkommen </p>
Ange ramens färg för kontur
Genom egenskapen outline-color definieras ramens färg. Angivelsen är identisk med border-color.
• invertera – en färg inverteras. Denna färg skapas genom omvändningen av alla bitar i en hexadecimal färgkod.
• Färgangivelse
Ett exempel:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Så här ser det ut i webbläsaren:
Ange ramtyp för kontur
Angivelsen outline-style bestämmer konturens typ. Tillåtna värden är samma som för border-style.
• ingen – osynlig ram
• prickig – prickad
• streckad – streckad
• solid – heldragen
• dubbel – dubbelheldragen
• spåra – 3D-linje
• rygg – 3D-linje
• infälld – 3D-linje
• utställning – 3D-linje
Ett exempel:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Ange ramtjocklek för kontur
Angivelsen outline-width är identisk med border-width. Även här definieras ramtjockleken. För att skapa en synlig ramlinje kombineras alltid outline-width med outline-style.
• medium – medeltjock ram
• tunn – tunn ram
• tjock – tjock ram
• Längdangivelse – bestämmer ramtjocklek
Ett exempel:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Välkommen
</p>
Och precis som med border finns det också en generell egenskap för outline-ramar.
<!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>Välkommen till PSD-Tutorials.de!</p>
</body>
</html>
Denna innefattar sedan följande egenskaper:
• outline-width
• outline-style
• outline-color
Principen är här densamma som för den generella border-egenskapen.
