6XC

CSS Rand Generator

Ontwerp een rand visueel — breedte, stijl (solid, dashed, dotted, double…), kleur en radius — met live preview.

665 weergaven

De border-eigenschap

Verkorte notatie: border: breedte stijl kleur, bijv. border: 2px dashed #5b3df5. Stijlen zijn onder meer solid, dashed, dotted, double, groove, ridge, inset en outset. Combineer met border-radius voor afgeronde randen, of stijl één zijde (border-top, …) voor accenten zoals een tab-onderstreping.

Veelgestelde vragen

Waarom verandert mijn rand de grootte van het element?

Standaard worden randen toegevoegd aan de boxafmetingen. Stel box-sizing: border-box in zodat breedte en hoogte de rand meerekenen — de moderne standaard die de meeste resets toepassen.

Hoe dik moet een rand zijn om double te tonen?

De stijl double heeft minstens 3px nodig — twee lijnen plus de tussenruimte. Daaronder wordt het als één enkele lijn weergegeven.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren