Een rand om je profiel

Met border zet je een rand om een stuk tekst, een hokje, een plaatje of je hele pagina. Je geeft drie dingen op, met een spatie ertussen: de dikte, de stijl en de kleur.

Dikte, stijl en kleur

De dikte geef je in pixels, bijvoorbeeld 3px. De kleur is een naam als hotpink of een code als #e0338a (zie Kleuren kiezen). Met wat padding komt de tekst niet tegen de rand aan.

<div style="border: 3px solid #e0338a; padding: 10px">Een roze rand van 3 pixels.</div>

De tien stijlen

Er zijn tien stijlen. Bij none en hidden zie je geen rand; die gebruik je om een rand weg te halen. De andere acht zie je hieronder. double, groove, ridge, inset en outset zie je pas goed vanaf een pixel of drie.

<p style="border: 3px solid #7048e8; padding: 6px">solid: doorgetrokken</p>
<p style="border: 3px dotted #7048e8; padding: 6px">dotted: stippels</p>
<p style="border: 3px dashed #7048e8; padding: 6px">dashed: streepjes</p>
<p style="border: 4px double #7048e8; padding: 6px">double: dubbel</p>
<p style="border: 4px groove #b8a6f5; padding: 6px">groove: een gleuf</p>
<p style="border: 4px ridge #b8a6f5; padding: 6px">ridge: een richel</p>
<p style="border: 4px inset #b8a6f5; padding: 6px">inset: ingedrukt</p>
<p style="border: 4px outset #b8a6f5; padding: 6px">outset: uitstekend</p>

Eén kant

Wil je maar aan één kant een rand? Gebruik dan border-top, border-right, border-bottom of border-left. Zo maak je een streep onder een kopje, of een balk naast een citaat.

<h3 style="border-bottom: 2px dashed #e0338a">Over mij</h3>
<p style="border-left: 5px solid #1c7ed6; padding-left: 10px">Een balk aan de linkerkant.</p>

Ronde hoeken

Met border-radius maak je de hoeken rond. Hoe groter het getal, hoe ronder. Met 50% wordt een vierkant een cirkel. Dat werkt ook zonder rand, bijvoorbeeld op een hokje met een achtergrondkleur.

<div style="border: 2px solid #2b8a3e; border-radius: 12px; padding: 10px">Zachte hoeken.</div>
<br>
<div style="background: #ffd34d; border-radius: 50%; width: 80px; height: 80px"></div>

Een rand om je hele pagina

Zet bovenaan je pagina een <div> met een rand, en sluit hem helemaal onderaan met </div>. Alles wat ertussen staat, komt binnen de rand.

<div style="border: 4px double #c2185b; border-radius: 8px; padding: 12px">
<h3>Welkom bij {naam}</h3>
<p>Alles op deze pagina staat binnen één rand.</p>
</div>

Gebruikte je vroeger .Profiel in je stijl? Die werkt nog: een rand op .Profiel komt om je hele pagina. Een tabel krijgt een rand met border="1"; meer daarover in Tabellen en kolommen.

Kaders uit de galerij

In de galerij staan kaders: kleine plaatjes die in negen stukjes gesneden worden. De vier hoeken blijven zoals ze zijn, de vier zijkanten worden zo vaak herhaald als nodig is, en het middelste stukje blijft leeg. Zo past het kader om elk hokje, groot of klein. Dat doe je met border-image:

• border: 6px solid transparent maakt ruimte voor het kader, 6 pixels breed.
• Achter url(…) staat de snijmaat: hoeveel pixels van de rand van het plaatje een hoek is. Elk kader heeft zijn eigen snijmaat; in de galerij staat hij al in de code.
• round herhaalt de zijkanten in hele stukjes. Met stretch rekt de browser ze uit, met repeat worden ze herhaald en aan beide uiteinden afgeknipt.

<div style="border: 6px solid transparent; border-image: url(/assets/profielhulp/kaders/plakband.png) 6 round; padding: 8px">
Een hokje met plakband op de hoeken.
</div>
<br>
<div style="border: 8px solid transparent; border-image: url(/assets/profielhulp/strak/kaders/dunne-lijn-roze.svg) 8 round; padding: 8px">
Een strak kader met ronde hoeken.
</div>

Een eigen kader uit Mijn bestanden werkt op dezelfde manier: zet de naam in url() en kies zelf de snijmaat.