CSS Border Radius Generator
Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.
Wat is CSS border-radius?
CSS border-radius is een eigenschap die de hoeken van de buitenrand van een element afrondt. U kunt elke hoek onafhankelijk instellen met één tot vier waarden.
Hoe maak ik een perfecte cirkel met border-radius?
Stel border-radius in op 50% bij een vierkant element (gelijke breedte en hoogte). Voor een ellips gebruikt u border-radius: 50% bij een rechthoekig element.
Welke eenheden kan ik gebruiken voor border-radius?
Border-radius accepteert px, %, em, rem, vw, vh en andere CSS-lengte-eenheden. Percentages zijn relatief ten opzichte van de afmetingen van het element.
Wat is de verkorte syntaxis voor border-radius?
De verkorte vorm volgt het patroon: linksboven rechtsboven rechtsonder linksonder. Eén waarde geldt voor alle hoeken. Twee waarden stellen linksboven/rechtsonder en rechtsboven/linksonder in.
Kan ik elliptische hoeken maken?
Ja, met de slash (/)-syntaxis kunt u aparte horizontale en verticale stralen definiëren. Bijvoorbeeld border-radius: 50% / 100px maakt een elliptische kromming.
Werkt border-radius op alle elementen?
Border-radius werkt op de meeste HTML-elementen inclusief div, button, img en input. Zonder overflow: hidden wordt overlopende inhoud mogelijk niet bijgesneden.
Kan ik complexe vormen maken met border-radius?
Ja, door verschillende straalwaarden voor elke hoek te combineren kunt u pillen, ovalen, bladeren en aangepaste organische vormen maken.
Wordt border-radius ondersteund in alle browsers?
Ja, border-radius wordt ondersteund in alle moderne browsers inclusief Chrome, Firefox, Safari, Edge en mobiele browsers.
Hoe maak ik een pilvormige knop?
Stel border-radius in op een waarde gelijk aan of groter dan de helft van de elementhoogte. Voor een knop van 40px hoog gebruikt u border-radius: 20px of hoger.
Beïnvloedt border-radius achtergrondafbeeldingen?
Ja, border-radius knipt de achtergrond, achtergrondafbeelding en rand van een element bij. De achtergrond volgt automatisch de afgeronde hoeken.
Kan ik border-radius animeren?
Ja, border-radius is animeerbaar met CSS-transities en animaties. U kunt vloeiend overgaan tussen verschillende straalwaarden.
Kan ik border-radius gebruiken met CSS-transformaties?
Ja, border-radius werkt goed met CSS-transformaties zoals rotate, scale en translate.
Hoe maak ik een cirkel met een rand?
Pas border-radius: 50% toe op een vierkant element met gelijke breedte en hoogte, en voeg dan een border-eigenschap toe.
Wat is het verschil tussen individuele hoek-eigenschappen en de verkorte vorm?
Individuele eigenschappen zoals border-top-left-radius geven u precieze controle over elke hoek. De verkorte vorm laat u meerdere hoeken in één declaratie instellen.