Stel de afronding van elk van de vier hoeken afzonderlijk in

Met Hoekafronding kunnen ontwerpers en front-endontwikkelaars een interface vóór implementatie afstemmen. Stel de afronding van elk van de vier hoeken afzonderlijk in.

Stel de afronding van elk van de vier hoeken afzonderlijk in. Het hulpmiddel is gratis in je browser en toont het resultaat zonder om een account te vragen.

Hoe te gebruiken

Voer de radiuswaarde voor de linkerbovenhoek in en daarna de andere drie hoeken in de opgegeven volgorde.
Gebruik een eenheid zoals px, em of procent en houd dezelfde eenheid aan voor alle vier hoeken.
Klik op de knop Genereren om de bijbehorende CSS-regel border-radius te produceren.
Lees het resultaat, dat de vier waarden combineert, en kopieer het naar uw stylesheet.
Test de weergave op een voorbeeldelement voordat u deze aan uw pagina toevoegt.

Voorbeeld

De voorbeeldinvoer gebruikt vier verschillende hoekwaarden. Na het genereren toont het resultaat de overeenkomstige eigenschap border-radius. U kunt deze uitvoer vergelijken met uw eigen waarden om de volgorde van de hoeken te bevestigen voordat u deze in uw code plakt.

Limieten en formaten

De tool tekent geen vak op het scherm; hij produceert alleen de CSS-regel om te kopiëren.
Waarden moeten numeriek en nul of positief zijn; negatieve waarden worden niet geaccepteerd door de CSS-eigenschap.
Het mengen van eenheden kan ertoe leiden dat de browser het resultaat negeert.
Controleer altijd de uiteindelijke weergave op uw pagina, omdat de context van het element het visuele effect kan beïnvloeden.

Waar de verwerking gebeurt

Alles draait in uw browser. De waarden die u invoert, worden nooit geüpload of opgeslagen. De berekening en opmaak van de CSS-regel gebeuren lokaal, zonder communicatie naar buiten.

Veelgestelde vragen

In welke volgorde moet ik de vier waarden invoeren?

De verwachte volgorde is linksboven, rechtsboven, rechtsonder, linksonder. Dit is de standaardvolgorde voor de eigenschap border-radius. Als u twee waarden omwisselt, zal de weergave verschillen. Controleer het weergegeven resultaat om dit te bevestigen.

Kan ik percentages gebruiken?

Ja, percentages worden geaccepteerd. Ze creëren afgeronde hoeken evenredig aan de grootte van het element. Houd dezelfde eenheid aan voor alle vier hoeken om een inconsistent resultaat te voorkomen.

Is het resultaat klaar om in mijn CSS-bestand te plakken?

Ja, het resultaat is een volledige CSS-eigenschap. U kunt het kopiëren en in uw stylesheet plakken. Zorg er alleen voor dat het niet wordt overschreven door een andere regel.