I CSS finnes det to ulike rammeformer, border og outline. Mens border alltid indikerer en rektangulær ramme, er outline-rammene som ble introdusert i CSS2 ment for ikke-rette områder. Og det er enda en forskjell: Med outline plasseres omrisset utenfor rammen, slik at et element kan få tildelt både en ramme med border og et omriss med outline.
De rammedefinisjonene som blir presentert i denne opplæringen er særlig interessante for elementer som utgjør en egen avsnitt. I utgangspunktet kan de selvfølgelig også brukes på andre elementer.
Definere rammer
Med border kan utseendet til hele rammen rundt et element bestemmes.
Den generelle border-egenskapen er en oppsummering av følgende verdier, som vil bli grundig behandlet:
• border-color
• border-style
• border-width
Verdiene for de enkelte egenskapene er adskilt med mellomrom. Rekkefølgen man angir egenskapene i spiller ingen rolle. For border finnes det også fire underegenskaper som gjør det mulig å angi farge, tykkelse og type ramme for enkelte elemntsider.
• border-top – Ramme på toppen
• border-right – Ramme til høyre
• border-bottom – Ramme nederst
• border-left – Ramme til venstre
Følgende eksempel viser bruken av border. Med denne definisjonen opprettes en trepunkts, svart og heltrukket ramme.
<p style="border:3pt solid #000000;"> Velkommen </p>
Resultatet i nettleseren:
Rammefarge
Gjennom border-color kan rammefargen bestemmes. Tillatte verdier inkluderer følgende:
• transparent – gjennomsiktig ramme
• Fargeverdi
Hvis kun én verdi oppgis, gjelder denne for alle sidene av rammene. For å definere forskjellige farger for hver side, angir man flere verdier, adskilt med mellomrom.
• To verdier – den første for øvre og nedre kant, den andre for venstre og høyre ramme.
• border-top-color – Rammefarge på toppen
• border-right-color – Rammefarge til høyre
• border-bottom-color – Rammefarge nederst
• border-left-color – Rammefarge til venstre
Eksempel:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Og her er resultatet i nettleseren:
Linjestil
Gjennom border-style kan linjestilen for rammen legges til.
Nedenfor finner du en liste over mulige rammevarianter:
• none – usynlig ramme
• dotted – prikket
• dashed – stiplede
• solid – heltrukket
• double – dobbelt heltrukket
• groove – 3D-linje
• ridge – 3D-linje
• inset – 3D-linje
• outset – 3D-linje
Her er et eksempel på hvordan rammestilene ser ut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</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 nettleseren:
Hvis kun én verdi angis, gjelder den for alle sidene av rammene. For å definere bordertyper for hver side, angir man flere verdier, adskilt med mellomrom.
Også her er et eksempel:
<p style="border-bottom-style: dashed;"> Stiplet ramme </p>
Og sånn ser det ut i nettleseren: 
Angi rammens bredde
Med border-width bestemmes bredden på rammen.
• Lengdeangivelse
• thin - tynn ramme
• medium - middels kraftig ramme
• thick - tykk ramme
Hvis det bare angis én verdi, gjelder denne for alle sidene til elementet. For å angi ulike rammetykkelser for enkeltstående sider, finnes det to muligheter. I den første varianten skrives flere verdier adskilt med mellomrom.
• To verdier - den første verdien for topp og bunn, den andre for venstre og høyre rammebredde.
• Tre verdier - den første verdien for topp, den andre for venstre og høyre, den tredje for bunnrammebredde.
• Fire verdier - første verdi for topp, andre for høyre, tredje for bunn og fjerde for venstre rammetykkelse.
På samme måte kan du også bruke følgende underegenskaper for border:
• border-top-width - rammetykkelse på toppen
• border-right-width - rammetykkelse til høyre
• border-bottom-width - rammetykkelse nederst
• border-left-width - rammetykkelse til venstre
Et eksempel:
<p style="border-width:2px;border-style: dotted;"> Hjertelig velkommen </p>
Rammefarge for omriss
Gjennom egenskapen outline-color defineres rammefarge. Angivelsen er identisk med border-color.
• invert - farge blir invertert. Denne fargen oppstår ved å invertere alle biter av en heksadesimal fargeverdi.
• Fargeangivelse
Et eksempel:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Slik ser det ut i nettleseren: 
Rammeslag for omriss
Angivelsen outline-style bestemmer konturens art. Tillatte verdier er de samme som for border-style.
• none - usynlig ramme
• dotted – prikket
• dashed – stiplet
• solid – heltrukket
• double – dobbelt heltrukket
• groove – 3D-linje
• ridge – 3D-linje
• inset – 3D-linje
• outset – 3D-linje
Et eksempel:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Rammetykkelse for omriss
Angivelsen outline-width er identisk med border-width. Også gjennom denne defineres rammetykkelsen. For å generere en synlig rammelinje, kombinerer man alltid outline-width med outline-style.
• medium - middels kraftig ramme
• thin - tynn ramme
• thick - tykk ramme
• Lengdeangivelse - bestemmer rammetykkelsen
Et eksempel:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Hjertelig velkommen
</p>
Og som med border, er det også en generell egenskap for outline-rammer.
<!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>Velkommen til PSD-Tutorials.de!</p>
</body>
</html>
Dette oppsummerer da følgende egenskaper:
• outline-width
• outline-style
• outline-color
Prinsippet her er det samme som for den generelle border-egenskapen.
