Border-radius-generator

Stel de afronding van elke hoek in en kopieer de border-radius-code. Zet de geavanceerde modus aan om elke hoek een eigen horizontale en verticale straal te geven en organische vormen (blobs) te maken.

Zo werkt border-radius

border-radius accepteert één tot vier waarden, die met de klok mee worden toegepast, te beginnen linksboven: 10px rondt alle hoeken gelijk af; 10px 20px geeft linksboven en rechtsonder 10px en de andere twee 20px; en 10px 20px 30px 40px stelt elke hoek apart in. Er zijn ook afzonderlijke eigenschappen, zoals border-top-left-radius.

Met een schuine streep geef je verschillende horizontale en verticale stralen op, waardoor elke hoek een kwart ellips wordt: 50% / 60% 60% 40% 40% tekent een ei. Zo maak je de organische vormen of "blobs" die in modern webdesign zo populair zijn.

Cirkels en pillen

Voor een cirkel gebruik je border-radius: 50% op een vierkant blok (anders krijg je een ellips). Voor een pil of een knop met ronde uiteinden gebruik je een pixelwaarde die groter is dan de halve hoogte, zoals 999px: de browser begrenst die automatisch en de vorm vervormt niet als de breedte verandert.

Afgeronde hoeken knippen ook de achtergrond en schaduwen bij, maar niet de inhoud die buiten het blok valt: voeg overflow: hidden toe om een afbeelding bij te knippen.