In CSS bestaan er twee verschillende soorten randen met border en outline. Terwijl border altijd een rechthoekige rand aanduidt, zijn de in CSS2 geïntroduceerde outline-randen bedoeld voor niet-hoekige gebieden. En er is nog een verschil: bij outline wordt de omlijning buiten de rand geplaatst, waardoor een element zowel een rand met border als een omlijning met outline kan hebben.
De randdefinities die in deze tutorial worden gepresenteerd, zijn vooral interessant voor elementen die een eigen alinea vormen. In principe kunnen ze natuurlijk ook op andere elementen worden toegepast.
Rand definiëren
Met border kan het uiterlijk van de gehele rand rond een element worden bepaald.
De algemene border-eigenschap is een samenvatting van de volgende waarden, waar later uitgebreider op wordt ingegaan:
• border-color
• border-style
• border-width
De waarden voor de individuele eigenschappen worden genoteerd met spaties tussen hen. De volgorde waarin de eigenschappen worden opgegeven, is niet van belang. Voor border zijn er ook vier subeigenschappen waarmee informatie over de kleur, dikte en type rand voor afzonderlijke elementzijden kan worden opgegeven.
• border-top – Bovenrand
• border-right – Rechterrand
• border-bottom – Onderkant van de rand
• border-left – Linkerrand
Het volgende voorbeeld toont het gebruik van border. Met deze definitie wordt een rand gecreëerd die drie punten breed, zwart en gestreept is.
<p style="border:3pt solid #000000;"> Welkom </p>
Het resultaat in de browser:
De randkleur
Met border-color wordt de kleur van de rand bepaald. Toegestane waarden zijn onder andere:
• transparant – transparante rand
• Kleurwaarde
Als er slechts één waarde wordt opgegeven, geldt deze voor alle randen. Om verschillende kleuren voor de individuele zijden te definiëren, geeft men meerdere waarden op, gescheiden door spaties.
• Twee waarden – de eerste waarde voor de boven- en onderkant, de tweede voor de linker- en rechterrand kleur.
• Drie waarden – de eerste waarde voor de bovenkant, de tweede voor de linker- en rechterrand, de derde voor de onderste randkleur.
• Vier waarden – de eerste waarde voor de bovenkant, de tweede voor de rechterkant, de derde voor de onderkant en de vierde voor de linker randkleur.
Evenzo kunnen de volgende border-subeigenschappen worden gebruikt:
• border-top-color – Bovenrandkleur
• border-right-color – Rechterrandkleur
• border-bottom-color – Onderkant van de randkleur
• border-left-color – Linkerrandkleur
Een voorbeeld:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
En hier het resultaat in de browser:
Het lijntype
Met border-style kan het lijntype van de rand worden ingesteld.
Hieronder vind je een lijst van mogelijke randvarianten:
• none – onzichtbare rand
• dotted – gestippeld
• dashed – gestreept
• solid – doorgetrokken
• double – dubbel doorgetrokken
• groove – 3D-lijn
• ridge – 3D-lijn
• inset – 3D-lijn
• outset – 3D-lijn
Hier is een voorbeeld van hoe de verschillende randsoorten eruitzien:
<!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>Het resultaat in de browser:
Als slechts één waarde wordt opgegeven, geldt deze voor alle zijden van de rand. Om verschillende randtypen voor de afzonderlijke zijden te definiëren, geeft men meerdere waarden op gescheiden door spaties.
• Twee waarden – de eerste voor de boven- en onderkant, de tweede voor de linker- en rechterlijnsoort.
• Drie waarden – de eerste voor de bovenkant, de tweede voor de linker- en rechterlijnsoort, de derde voor de onderste lijnsoort.
• Vier waarden – de eerste voor de bovenrand, de tweede voor de rechterrand, de derde voor de onderkant en de vierde voor de linkerrand.
Evenzo kunnen de volgende border-subeigenschappen worden gebruikt:
• border-top-style – Bovenrandlijnsoort
• border-right-style – Rechterrandlijnsoort
• border-bottom-style – Onderkant van de randlijnsoort
• border-left-style – Linkerrandlijnsoort
Ook hier is een voorbeeld:
<p style="border-bottom-style: dashed;"> Gestreepte omlijsting </p>
En zo ziet het eruit in de browser:
De randbreedte instellen
Met border-width wordt de breedte van de rand bepaald.
• Lengte aangeven
• dun - dunne rand
• medium - middelmatige rand
• dik - dikke rand
Als slechts één waarde wordt opgegeven, geldt dit voor alle zijden van het element. Om verschillende randdiktes voor afzonderlijke zijden in te stellen, zijn er twee mogelijkheden. Bij de eerste variant noteer je meerdere waarden gescheiden door spaties.
• Twee waarden - de eerste waarde voor de boven- en onderkant, de tweede voor de linker- en rechterrand
• Drie waarden - de eerste waarde voor de bovenkant, de tweede voor de linker- en rechterrand, de derde voor de onderkant
• Vier waarden - eerste waarde voor boven, tweede voor de rechter, derde voor de onderkant en vierde voor de linkerrand
Evenzo kunt u ook de volgende border-eigenschappen gebruiken:
• border-top-width - bovenste randdikte
• border-right-width - randdikte rechts
• border-bottom-width - randdikte onderaan
• border-left-width - randdikte links
Een voorbeeld:
<p style="border-width:2px;border-style:dotted;"> Hartelijk welkom </p>
De randkleur voor schets
Met de eigenschap outline-color wordt de randkleur gedefinieerd. De specificatie is identiek aan border-color.
• inverteren - een kleur wordt omgekeerd. Deze kleur ontstaat door de omkering van alle bits van een hexadecimale kleurwaarde.
• Kleuraanduiding
Een voorbeeld:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Zo ziet het eruit in de browser:
Het type rand voor schets
De opgave outline-style bepaalt het type rand. Toegestane waarden zijn dezelfde als bij border-style.
• geen - onzichtbare rand
• gepunktet - gestippeld
• gestippelt - gestreept
• solide - doorgetrokken
• dubbel - dubbel doorgetrokken
• groove - 3D-lijn
• ridge - 3D-lijn
• ingezet - 3D-lijn
• uitstekend - 3D-lijn
Een voorbeeld:
<p style="outline-style: solid; outline-width: 2px; outline-color: red;"> PSD-Tutorials.de </p>
De randdikte voor schets
De opgave outline-width is identiek aan border-width. Hiermee wordt ook de dikte van de rand gedefinieerd. Om een zichtbare randlijn te creëren, combineert u outline-width altijd met outline-style.
• medium - middelmatige rand
• dun - dunne rand
• dik - dikke rand
• Lengte-aanduiding - bepaalt de dikte van de rand
Een voorbeeld:
<p style="outline-width: thin; outline-style: solid; outline-color: red;">
Hartelijk welkom
</p>
En net als bij border is er ook een algemene eigenschap voor outline-randen.
<!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>Welkom bij PSD-Tutorials.de!</p>
</body>
</html>
Dit vat dan de volgende eigenschappen samen:
• outline-width
• outline-style
• outline-color
Hetzelfde principe geldt hier als voor de algemene border-eigenschap.
