CSS Border Radius Generator
Visuell CSS border-radius generator. Justera varje hörn oberoende med realtidsförhandsgranskning och kopiera CSS-koden omedelbart.
Vad är CSS border-radius?
CSS border-radius är en egenskap som rundar hörnen på ett elements yttre kant. Du kan ställa in varje hörn oberoende med en till fyra värden.
Hur gör jag en perfekt cirkel med border-radius?
Ställ in border-radius till 50% på ett kvadratiskt element (lika bredd och höjd). För en ellips, använd border-radius: 50% på ett rektangulärt element.
Vilka enheter kan jag använda för border-radius?
Border-radius accepterar px, %, em, rem, vw, vh och andra CSS-längdenheter. Procenttal är relativa till elementets dimensioner.
Vad är den korta syntaxen för border-radius?
Den korta syntaxen följer mönstret: övre-vänster övre-höger nedre-höger nedre-vänster. Ett värde gäller alla hörn. Två värden sätter övre-vänster/nedre-höger och övre-höger/nedre-vänster.
Kan jag skapa elliptiska hörn?
Ja, med snedstreck (/) syntax kan du definiera separata horisontella och vertikala radier. Till exempel border-radius: 50% / 100px.
Fungerar border-radius på alla element?
Border-radius fungerar på de flesta HTML-element inklusive div, button, img och input. Utan overflow: hidden kan det dock inte klippa överflödigt innehåll.
Kan jag skapa komplexa former med border-radius?
Ja, genom att kombinera olika radievärden för varje hörn kan du skapa piller, ovaler, blad och anpassade organiska former.
Stöds border-radius i alla webbläsare?
Ja, border-radius stöds i alla moderna webbläsare inklusive Chrome, Firefox, Safari, Edge och mobila webbläsare.
Hur gör jag en pillformad knapp?
Ställ in border-radius till ett värde lika med eller större än hälften av elementets höjd. För en 40px hög knapp, använd border-radius: 20px eller högre.
Påverkar border-radius bakgrundsbilder?
Ja, border-radius klipper bakgrunden, bakgrundsbilden och ramen för ett element. Bakgrunden följer automatiskt de rundade hörnen.
Kan jag animera border-radius?
Ja, border-radius är animerbar med CSS-övergångar och animationer. Du kan mjukt övergå mellan olika radievärden.
Kan jag använda border-radius med CSS-transformeringar?
Ja, border-radius fungerar bra med CSS-transformeringar som rotate, scale och translate.
Hur skapar jag en cirkel med ram?
Tillämpa border-radius: 50% på ett kvadratiskt element med lika bredd och höjd, lägg sedan till en border-egenskap.
Vad är skillnaden mellan individuella hörnegenskaper och kort syntax?
Individuella egenskaper som border-top-left-radius ger dig exakt kontroll över varje hörn. Den korta syntaxen låter dig ställa in flera hörn i ett uttalande.
Hur man använder CSS Border Radius Generator
Forma rundade hörn visuellt med denna CSS-generator för border-radius. Allt körs lokalt i din webbläsare och ingen data laddas upp.
- Välj px, %, em eller rem i rullgardinsmenyn Unit.
- Dra reglagen Top Left, Top Right, Bottom Right och Bottom Left för att runda av varje hörn separat.
- Slå på Link all corners för att använda ett och samma värde för alla fyra hörn.
- Kopiera den genererade CSS-koden från förhandsvisningen och klistra in den i din stilmall.
50 % i alla hörn ger en perfekt cirkel eller kapsel; med em eller rem skalar radien tillsammans med din typografi.
Relaterade verktyg
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- CSS Grid-generator Gratis visuell CSS Grid-generator med liveförhandsgranskning. Designa responsiva grid-layouter interaktivt och exportera produktionsklar CSS-kod direkt.
- CSS Flexbox-generator Visuell CSS Flexbox-generator med liveförhandsgranskning. Justera flex-egenskaper och få CSS-kod redo att använda.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.