Handytool
UtvecklareGratisKörs lokalt

CSS border-radius-generator

Designa CSS border-radius visuellt — enhetlig, per-hörn och elliptisk — med live-förhandsvisning.

Förhandsgranskning
CSS
border-radius: 16px;
Läge
Enhet

Per-hörn-läge styr varje hörn individuellt; elliptisk delar horisontala och vertikala radier.

Om CSS border-radius-generator

Handytools border-radius-generator låter dig forma hörnen på ett element med skjutreglage istället för gissningar. Använd enhetligt läge för en enkel rundad låda, per-hörn läge för att bygga asymmetriska pillförmer, eller elliptisk läge för att dela horisontella och vertikala radier för organiska blobformer. Förhandsvisningen uppdateras live och CSS-deklarationen är ett klick bort.

Funktioner i CSS border-radius-generator

  • 01

    Enhetliga och per-hörn-lägen

    Enhetligt läge applicerar en radie på varje hörn. Per-hörn-läge kontrollerar övre vänster, övre höger, nedre höger och nedre vänster oberoende — pill-, blad- och asymmetriska etikett-former är bara några klick bort.

  • 02

    Elliptiska (X/Y) hörn

    Slå på elliptisk läge för att ange en horisontell och en vertikal radie per hörn — syntaxen CSS stöder för organiska, blob-liknande former.

  • 03

    Tre enheter

    Byt mellan px, % och rem. Procentvärden skapar verkliga ellipser som skalas med lådan; rem-värden spårar rotens teckenstorlek för tillgänglighet.

Vanliga frågor om CSS border-radius-generator

Vad är skillnaden mellan px och %?
Pixelradier är absoluta — ett 16px-hörn är alltid 16px. Procentradier är relativa till elementets bredd och höjd, så 50% skapar en perfekt cirkel på en kvadratisk låda och en ellips på en rektangel.
När ska jag använda elliptisk läge?
Använd elliptisk läge när du vill ha ett hörn som utbukar mer på en axel — till exempel en horisontell pille (50%/100%) eller en blad-liknande blob-form. CSS uttrycker detta som `top-left-x top-right-x ... / top-left-y top-right-y ...`.
Varför ser min procentradie fel ut på en icke-kvadratisk låda?
Procentsatser på border-radius är relativa till motsvarande sida: horisontella procentsatser till bredd, vertikala till höjd. På en bred, kort låda betyder det att hörnen sträcker sig in i ellipser, inte perfekta bågar.
Fungerar utmatningen i alla webbläsare?
Ja — border-radius och elliptisk syntax stöds i alla moderna webbläsare inklusive alla evergreen-versioner av Safari, Firefox, Edge och Chrome.

Relaterade verktyg

Utvecklare →

Utforska fler verktyg

Alla verktyg →