Proprietatea border-radius

Proprietatea border-radius creează colțuri rotunjite pentru bordură și fundal. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni. Valoarea implicită: 0. Este o prescurtare pentru proprietățile border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaxă

cssselector {
  border-radius: valoare;
}

Numărul de valori

Proprietatea poate accepta 1, 2, 3 sau 4 valori, specificate separate prin spațiu:

Rotunjire eliptică

Două valori separate prin bara oblică stabilesc o rotunjire eliptică. Valoarea dinaintea barei oblice indică rotunjirea orizontală, iar valoarea de după bara oblică - rotunjirea verticală:

cssselector {
  border-radius: orizontal / vertical;
}

Dacă se specifică rotunjiri pentru mai multe colțuri, atunci înaintea barei oblice se enumeră toate rotunjirile orizontale, iar după ea - toate rotunjirile verticale.

Exemplu

Să stabilim o rotunjire de 10px pentru toate colțurile:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Să vedem cum arată rotunjirea pentru o bordură sub formă de puncte:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Să stabilim o rotunjire de 10px pentru colțurile unei diagonale și o rotunjire de 40px - pentru colțurile celeilalte diagonale:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Să stabilim o rotunjire de 10px pentru colțul din stânga-sus, o rotunjire de 30px pentru colțul din dreapta-jos și rotunjiri de 50px - pentru colțurile celeilalte diagonale:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Să stabilim rotunjiri diferite pentru fiecare dintre colțuri:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Să facem o rotunjire eliptică, stabilind 20px pentru partea orizontală a rotunjirii și 40px - pentru partea verticală:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Acum să stabilim rotunjiri eliptice diferite pentru toate colțurile, fiecare în parte:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Exemplu

Dacă pentru un bloc pătrat se stabilește o rotunjire egală cu jumătate din latura pătratului, se va obține un cerc:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exemplu

Dacă se stabilește o rotunjire mai mare decât latura pătratului, se va obține tot un cerc:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exemplu

Un cerc poate fi obținut și prin stabilirea border-radius la 50% (avantajul constă în faptul că la modificarea dimensiunilor pătratului nu va fi necesară schimbarea rotunjirii):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Exemplu

Dacă se stabilește border-radius în procente pentru un dreptunghi, se va obține o rotunjire eliptică. Dacă lățimea este stabilită la 400px, înălțimea la 200px, iar border-radius la 10%, atunci este echivalent cu a scrie 40px/20px:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exemplu

Să stabilim valoarea border-radius la 50% pentru un dreptunghi - se va obține un elips:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exemplu

Proprietatea border-radius rotunjește nu numai colțurile bordurii, ci și ale fundalului:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Vezi și