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.
Cum se folosește Generator de Border Radius CSS
Proiectează colțuri rotunjite vizual cu acest generator CSS border-radius. Totul rulează local în browserul tău și nu se încarcă niciun fel de date.
- Alege px, %, em sau rem din lista derulantă Unit.
- Trage cursoarele Top Left, Top Right, Bottom Right și Bottom Left pentru a rotunji fiecare colț separat.
- Activează Link all corners pentru a aplica o singură valoare tuturor celor patru colțuri.
- Copiază CSS-ul generat din previzualizare și lipește-l în foaia ta de stil.
50% pe toate colțurile transformă elementul într-un cerc sau o capsulă perfectă; cu em sau rem raza se ajustează împreună cu tipografia.
Instrumente conexe
- Generator Box Shadow CSS Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator CSS Grid Generator vizual gratuit CSS Grid cu previzualizare live. Proiectați layout-uri de grilă responsive interactiv și exportați cod CSS gata de producție.
- Generator CSS Flexbox Generator vizual CSS Flexbox cu previzualizare live. Ajustați proprietățile flex și obțineți cod CSS gata de utilizare.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.