Generator de Border Radius CSS
Generator vizual de border-radius CSS. Ajustați fiecare colț independent cu previzualizare în timp real și copiați codul CSS instantaneu.
Ce este CSS border-radius?
CSS border-radius este o proprietate care rotunjește colțurile marginii exterioare a unui element. Puteți seta fiecare colț independent folosind una până la patru valori.
Cum fac un cerc perfect cu border-radius?
Setați border-radius la 50% pe un element pătrat (lățime și înălțime egale). Pentru o elipsă, utilizați border-radius: 50% pe un element dreptunghiular.
Ce unități pot folosi pentru border-radius?
Border-radius acceptă px, %, em, rem, vw, vh și alte unități de lungime CSS. Procentele sunt relative la dimensiunile elementului.
Care este sintaxa scurtă pentru border-radius?
Prescurtarea urmează modelul: stânga-sus dreapta-sus dreapta-jos stânga-jos. O valoare se aplică tuturor colțurilor. Două valori setează stânga-sus/dreapta-jos și dreapta-sus/stânga-jos.
Pot crea colțuri eliptice?
Da, folosind sintaxa cu slash (/) puteți defini raze orizontale și verticale separate. De exemplu border-radius: 50% / 100px.
Border-radius funcționează pe toate elementele?
Border-radius funcționează pe majoritatea elementelor HTML inclusiv div, button, img și input. Fără overflow: hidden poate nu decupează conținutul care debordează.
Pot crea forme complexe cu border-radius?
Da, combinând diferite valori de rază pentru fiecare colț, puteți crea pastile, ovale, frunze și forme organice personalizate.
Border-radius este suportat în toate browserele?
Da, border-radius este suportat în toate browserele moderne inclusiv Chrome, Firefox, Safari, Edge și browsere mobile.
Cum fac un buton în formă de pastilă?
Setați border-radius la o valoare egală sau mai mare decât jumătate din înălțimea elementului. Pentru un buton de 40px înălțime, utilizați border-radius: 20px sau mai mare.
Border-radius afectează imaginile de fundal?
Da, border-radius decupează fundalul, imaginea de fundal și marginea elementului. Fundalul urmează automat colțurile rotunjite.
Pot anima border-radius?
Da, border-radius este animabil cu tranziții și animații CSS. Puteți trece lin între diferite valori de rază.
Pot folosi border-radius cu transformări CSS?
Da, border-radius funcționează bine cu transformări CSS precum rotate, scale și translate.
Cum creez un cerc cu margine?
Aplicați border-radius: 50% pe un element pătrat cu lățime și înălțime egale, apoi adăugați o proprietate border.
Care este diferența dintre proprietățile individuale de colț și prescurtare?
Proprietățile individuale precum border-top-left-radius vă dau control precis asupra fiecărui colț. Prescurtarea vă permite să setați mai multe colțuri într-o singură declarație.