CSS border-radius-generator
Maak complexe border-radius-waarden in CSS op een visuele manier. Onafhankelijke controle over elke hoek.
border-radius: 20px 20px 20px 20px;
Hoe u deze tool gebruikt
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Wat is de CSS border-radius-generator?
De CSS-eigenschap border-radius accepteert tot vier waarden, één per hoek, in de volgorde linksboven, rechtsboven, rechtsonder en linksonder. Combineer verschillende radiussen voor organische druppelvormen, asymmetrische kaarten of stijlen in de vorm van een tekstballon. Met deze tool kunt u elke hoek met schuifregelaars instellen en het resultaat in realtime zien.
Veelvoorkomende toepassingen
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Veelgestelde vragen
Hoe zit het met elliptische radiussen?▼
Gerelateerde tools
Kleurconverter (HEX/RGB/HSL)
Zet kleuren om tussen de formaten HEX, RGB en HSL. Kies een kleur visueel of voer de waarden handmatig in.
CSS box-shadow-generator
Maak box-shadow-waarden in CSS op een visuele manier. Bekijk een realtime voorvertoning en kopieer de gegenereerde CSS.
CSS-verloopgenerator
Maak lineaire en radiale CSS-verlopen. Kies de kleuren op visuele wijze en kopieer de gegenereerde CSS.
Cubic-bezier-versnellingscurvegenerator
Maak cubic-bezier-versnellingscurves voor CSS. Inclusief standaard voorinstellingen.
Kleurpaletgenerator
Genereer harmonieuze kleurpaletten op basis van een willekeurige basiskleur. Ondersteunt complementaire, analoge, triadische en monochromatische schema's.
CSS clamp()-generator
Genereer vloeiende, responsieve CSS-waarden met clamp(). Schaalt soepel tussen minimum- en maximumformaten over de viewportbereiken heen.