Cu CSS3, puteți da oricărui element „colțuri rotunjite” folosind border-radius proprietate. Valoarea poate fi în orice unitate de lungime CSS validă.

  .rounded-corners {
    border-radius: 20px;
  }

  .circle {
    border-radius: 50%;
  }
exemple

Notă: border-radius proprietatea este de fapt o proprietate de stenografie pentru border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius proprietăți.

Dacă se furnizează o singură valoare, raza chenarului va fi aceeași pentru toate cele patru colțuri, ca în exemplele de mai sus. Dar aveți și opțiunea de a specifica valori diferite pentru fiecare colț.

.new-shape {
  border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */
}

Dacă sunt furnizate doar două valori, prima valoare se aplică colțului din stânga sus și din dreapta jos, iar a doua valoare se aplică în colțul din dreapta sus și din stânga jos.

.leaf-shape {
  border-radius: 0 50%;
}

Dacă sunt setate trei valori, prima se aplică din nou pe raza sus-stângă, a doua valoare indică sus-dreapta și jos-stânga, lăsând a treia valoare pentru a indica colțul din dreapta jos.

.odd-shape {
  border-radius: 0 20px 50%;
}
exemple

Rotunjirea unui colț nu trebuie să fie perfect simetrică. Puteți specifica atât razele orizontale, cât și cele verticale folosind o bară („/”) pentru a obține un colț cu o formă eliptică.

.elliptical-1 {
  border-radius: 50px/10px; /* horizontal radius / vertical radius */
}
.elliptical-2 {
  border-radius: 10px/50px; 
}
exemple

Deoarece doar o pereche de valori este dată în exemplele de mai sus, toate cele patru colțuri sunt aceleași. Dar, desigur, dacă doriți o formă mai complexă, puteți furniza până la patru valori pentru razele orizontale și patru pentru razele verticale.

.elliptical-3 {
  border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */
}

Observați cum stenograma de mai sus produce același rezultat ca și specificarea proprietăților individuale de mai jos. Rețineți că, atunci când colțurile sunt setate individual, valorile sunt separate de spațiu în loc de barele separate.

.elliptical-4 {
  border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */
  border-top-right-radius: 20px 50px;
  border-bottom-right-radius: 50px 20px;
  border-bottom-left-radius: 20px 50px;
}
exemple

Mai multe informații despre proprietatea razei frontierei CSS:

  • Aflați cum să utilizați proprietatea razei chenarului CSS construind un calculator