Kader met afgeronde hoeken III: Aanpak met CSS
Als je deze site bezoekt met een heel oude browser, dan staat deze tekst in een rechthoekig kader.
In voldoende up-to-date browsers hebben de hoeken een afronding.
Op deze bladzijde wordt beschreven hoe je dat aanpakt.
Op deze bladzijde wordt beschreven hoe je dat aanpakt.
- De aanpak om dit te bereiken met CSS is heel eenvoudig:
- Zet de tekst die in het kader moet komen in een blok, dus tussen <div> ... </div>-tags. Met andere blok-elementen zoals <p> ... </p> kan het ook.
- Geef het blok-element een style mee waarin je de rand en de straal van de afronding opgeeft. Het
voorbeeld op deze bladzijde gebruikt:
style="border:5px solid #006A46; padding:10px; margin:10px;
border-radius:15px;" - Je kunt aan border-radius vier keer waarden voor een straal meegeven, nl. linksboven, rechtsboven, rechtsonder en linksonder. Als je twee waarden voor de straal meegeeft, gelden die voor linksboven en rechtsonder, resp. rechtsboven en linksonder.
- Voor de straal mag je elke lengtemaat ingeven waar CSS mee overweg kan: pt, px, em, ex, enzovoort.
- Natuurlijk kun je dit ook regelen via een id of class die verwijst naar een <style>.
- De afronding maak je dus met het CSS-attribuut border-radius.
- In voorkomende gevallen kun je ook een andere aanpak kiezen, zoals beschreven in de items Kader met afgeronde hoeken I: Aanpak met een tabel en Kader met afgeronde hoeken II: Aanpak met div-tags.
Het is ook mogelijk om de afrondingsstraal van de vier hoeken verschillend te maken. Daarvoor zijn er
CSS-attributen gedefinieerd waarvan de naam voor zich spreekt:
border-top-left-radius:10px 20px;
border-top-right-radius:20px 10px;
border-bottom-right-radius:15px 5px;
border-bottom-left-radius:5px 15px;
- De stralen die je opgeeft zijn de stralen van een ellips. Het eerste getal is de straal van de horizontale kaderlijn (dus boven of onder). Het tweede getal is de straal van de verticale kaderlijn (dus links of rechts).
- Als je één straal opgeeft krijg je afgeronde hoeken.
De code van het eerste voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>, op de plaats waar het kader moet verschijnen).<style>
.Kader {
border:5px solid #006A46; padding:10px; margin:10px;
border-radius:15px;
}
</style>
<div class="Kader">Als je deze site bezoekt met ...
... hoe je dat aanpakt.</div>
De code van het tweede voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>, op de plaats waar het kader moet verschijnen).<style>
.Kader2 {
border:5px solid #000080; padding:10px; margin:10px;
border-top-left-radius:10px 20px;
border-top-right-radius:20px 10px;
border-bottom-right-radius:15px 5px;
border-bottom-left-radius:5px 15px;}
</style>
<div class="Kader2">Het is ook mogelijk om ...
... radius:5px 15px;</div>
