Border Radius-generator
De CSS border radius generator stelt elke hoek van de border-radius van een element in procenten in met aparte schuifregelaars of één All Corners-regelaar, plus presets zoals cirkel, blad en blob, en kopieert de CSS.
Over deze tool
De CSS border radius generator stelt elke hoek van de border-radius van een element in procenten in met aparte schuifregelaars of één All Corners-regelaar, plus presets zoals cirkel, blad en blob, en kopieert de CSS.
Zo gebruik je het
- Sleep de schuifregelaars voor elke hoek, of gebruik All Corners.
- Probeer een preset zoals Circle, Leaf of Blob.
- Pas zo nodig het formaat van de preview aan.
- Klik op Copy CSS.
Goed om te weten
- border-radius accepteert maximaal vier waarden in de volgorde linksboven, rechtsboven, rechtsonder, linksonder.
- border-radius: 50% op een vierkant element maakt een cirkel.
- Radii in procenten schalen mee met het element; radii in pixels blijven vast.
- Ongelijke radii op tegenoverliggende hoeken maken blad- en blobvormen zonder SVG.
- border-radius wordt in elke huidige browser zonder prefixes ondersteund.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik afgeronde hoeken in CSS?
Stel border-radius in, bijvoorbeeld border-radius: 12px; voor alle hoeken, of vier waarden voor afzonderlijke hoeken.
Hoe maak ik een cirkel met CSS?
Geef het element een gelijke breedte en hoogte en border-radius: 50%.
In welke volgorde staan de vier waarden van border-radius?
Linksboven, rechtsboven, rechtsonder, linksonder: met de klok mee vanaf de hoek linksboven.
Gebruik ik px of % voor border-radius?
Gebruik px voor een vaste hoekgrootte op knoppen en kaarten; gebruik % voor vormen zoals cirkels en blobs die met het element meeschalen.