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.