Dit rode kader met afgeronde hoeken is gemaakt met een paar regeltjes css-code.
Deze box met ronde hoeken past zich aan (voor wat de afmeting betreft), aan de hoeveelheid tekst (of een afbeelding) die er in geplaatst is. Dit gebeurt zonder dat er een snippertje javascript gebruikt wordt of dat er graphics nodig zijn. De breedte van het kader kan ingesteld worden bij de class .kader, door de width een gewenste waarde te geven. De kleur van het kader kan worden veranderd door de vijf kleur-bepalingen in de stylesheet (allemaal) een andere waarde (is nu ingesteld op #f00) te geven. Plaats de stylesheet in de head-sectie van de pagina en de html-code in de body-sectie, op de plaats waar het kader met de afgeronde hoeken moet verschijnen.
<style type="text/css">
.inhoud_kader{margin:0;padding:0.5em;overflow:hidden;}
.kader{width:15em;margin:0 auto;}
.kader .rk4,.kader .rk3,.kader .rk2,.kader .rk1{font-size:1px;display:block;/* \*/ overflow:hidden;/* */}
.kader .rk4,.kader .rk3,.kader .rk2{height:1px;}
.kader .rk3,.kader .rk2,.kader .rk1{border-left:1px solid #f00;border-right:1px solid #f00;}
.kader .kr4{margin:0 5px;background:#f00;color:inherit;}
.kader .kr3{margin:0 3px;border-width:0 2px;}
.kader .kr2{margin:0 2px;}
.kader .kr1{height:2px;margin:0 1px;}
.kader .kaderhoek{display:block;border-left:1px solid #f00;border-right:1px solid #f00;}
</style>
<div class="kader">
<em class="rk4 kr4"></em><em class="rk3 kr3"></em><em class="rk2 kr2"></em><em class="rk1 kr1"></em>
<div class="kaderhoek">
<p class="inhoud_kader">
Dit rode kader met afgeronde hoeken is
gemaakt met een paar regeltjes css-code.
</p>
</div>
<em class="rk1 kr1"></em><em class="rk2 kr2"></em><em class="rk3 kr3"></em><em class="rk4 kr4"></em>
</div>