CSS Border-Radius-generator
Skapa CSS border-radius visuellt med live-förhandsvisning och kopiera produktionsfärdig kod.
border-radius: —;
100 % privat – allt körs i din webbläsare. Ingenting laddas upp.
Om CSS Border-Radius-generator
CSS Border Radius-generatorn skapar allt från mjukt rundade kort till organiska blob-former. Dra hörnhandtagen direkt i förhandsvisningen, eller ställ in varje hörn numeriskt — inklusive den fullständiga åttavärdes-syntaxen, där varje hörn har separata horisontella och vertikala radier. Den andra axeln är det som möjliggör ägg, löv, tårar och blobbar.
En hörn-länkning-omkopplare håller alla fyra hörn synkroniserade för klassisk enhetlig rundning, medan avlänkning frigör varje hörn för asymmetriska former. Tolv förinställningar — rounded, pill, circle, squircle, två blobbar, leaf, egg, arch, teardrop, petal och wave — visar vad egenskapen klarar, och en slumpknapp genererar oändligt nya organiska former.
Du kan ändra enheten, byta färg på elementet och duken för att matcha din design, och kopiera antingen det rena border-radius-värdet eller en komplett CSS-regel. Verktyget är 100 % klientbaserat — inget laddas upp.
Så använder du CSS Border-Radius-generator
- Dra hörnhandtagen i förhandsvisningen, eller stäng av "Länka alla hörn" för att redigera varje hörn separat.
- Ställ in horisontell och vertikal radie per hörn för organiska, blob-liknande former.
- Välj din enhet och justera element- och bakgrundsfärgerna för att förhandsgranska i sammanhang.
- Prova förinställningarna — pill, squircle, blob, leaf, teardrop och fler — eller tryck på slumpa.
- Kopiera border-radius-värdet eller den fullständiga CSS-koden.