Generator border și border-radius CSS

Exemple de border și border-radius

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Card simplu Margine fină și colțuri ușor rotunjite, pentru carduri de articole sau produse.

.element {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

Buton pastilă Un border-radius foarte mare rotunjește complet capetele, indiferent de lățime.

.element {
  border: 2px solid #2563eb;
  border-radius: 999px;
}

Avatar rotund Cu 50% pe un element pătrat obții un cerc perfect, potrivit pentru poze de profil.

.element {
  border: 4px solid #7c3aed;
  border-radius: 50%;
}

Zonă de upload Chenarul punctat arată că acolo poți trage un fișier.

.element {
  border: 2px dashed #94a3b8;
  border-radius: 16px;
}

Formă de frunză Două colțuri opuse mari și două mici; scrise ca două valori.

.element {
  border: 3px solid #16a34a;
  border-radius: 60px 8px;
}

Inel de focus Outline semitransparent la distanță de margine, pentru câmpuri și butoane selectate cu tastatura.

.element {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 2px;
}

Chenar dublu retro Stilul double desenează două linii; are nevoie de cel puțin 3px grosime.

.element {
  border: 6px double #0f172a;
  border-radius: 4px;
}

Doar sub titlu Un singur border, pe latura de jos, folosit ca linie decorativă sub titluri sau taburi.

.element {
  border-bottom: 3px solid #f97316;
  border-radius: 0;
}

Cum folosești generatorul de border

Setează grosimea, stilul (solid, dashed, dotted, double etc.) și culoarea marginii. Glisorul de opacitate transformă culoarea în rgba().
La border-radius, alege unitatea (px sau %) și o rază comună sau câte o rază pentru fiecare colț.
Bifează Adaugă outline dacă vrei și un contur exterior, la o distanță aleasă cu outline-offset.

Proprietatea border

border este forma scurtă pentru border-width, border-style și border-color. Stilul este obligatoriu: fără el, marginea nu apare deloc, chiar dacă ai pus grosime și culoare.

.card {
  border: 2px solid #2563eb;
}

Proprietatea border-radius

border-radius rotunjește colțurile. Cu o singură valoare, toate colțurile sunt egale. Cu patru valori, ordinea este: stânga sus, dreapta sus, dreapta jos, stânga jos (în sensul acelor de ceasornic).

.buton {
  border-radius: 999px;          /* pastilă */
}
.avatar {
  border-radius: 50%;            /* cerc, dacă elementul e pătrat */
}
.frunza {
  border-radius: 80px 8px;       /* colțuri opuse egale */
}

Diferența dintre border și outline

outline se desenează în afara elementului și nu ocupă spațiu în pagină, deci nu mută elementele vecine. De aceea este folosit pentru starea de focus. outline-offset îl îndepărtează de margine; o valoare negativă îl mută în interior.

Întrebări frecvente

De ce nu se vede border-ul meu?

Cel mai des lipsește stilul. border: 2px #000 nu afișează nimic, pentru că stilul implicit este none. Scrie border: 2px solid #000.

Cum fac un cerc perfect?

Pune border-radius: 50% pe un element cu lățimea egală cu înălțimea. Dacă elementul e dreptunghiular, rezultatul este o elipsă.

Border-ul mărește elementul?

Da, cu box-sizing: content-box (implicit). Cu box-sizing: border-box, marginea intră în lățimea și înălțimea setate.