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.
Hoe CSS Border Radius Generator te gebruiken
Ontwerp afgeronde hoeken visueel met deze CSS-border-radius-generator. Alles draait lokaal in je browser en er worden geen gegevens geüpload.
- Kies px, %, em of rem in de vervolgkeuzelijst Unit.
- Sleep de schuifregelaars Top Left, Top Right, Bottom Right en Bottom Left om elke hoek apart af te ronden.
- Zet Link all corners aan om met één waarde alle vier de hoeken tegelijk in te stellen.
- Kopieer de gegenereerde CSS uit de voorbeeldweergave en plak deze in je stylesheet.
50% op alle hoeken geeft een perfecte cirkel of capsule; met em of rem schaalt de straal mee met je typografie.
Gerelateerde tools
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Grid Generator Gratis visuele CSS Grid-generator met live preview. Ontwerp interactief responsieve grid-lay-outs en exporteer direct productieklare CSS-code.
- CSS Flexbox Generator Visuele CSS Flexbox-generator met live preview. Pas flex-eigenschappen aan en krijg direct bruikbare CSS-code.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.