Omadus border-radius

Omadus border-radius loob ümardatud nurgad piirile ja taustale. Omaduse väärtuseks on suvalised mõõtühikud suuruste jaoks. Vaikeväärtus: 0. See on lühend omaduste border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius jaoks.

Süntaks

cssvalija {
  border-radius: väärtus;
}

Väärtuste arv

Omadus võib võtta 1, 2, 3 või 4 väärtust, mis on eraldatud tühikuga:

Elliptiline ümardamine

Kaks väärtust kaldkriipsu abil määravad elliptilise ümardamise. Väärtus enne kaldkriipsu määrab horisontaalse ümarduse, ja väärtused pärast kaldkriipsu - vertikaalse:

cssvalija {
  border-style: horisontaalne / vertikaalne;
}

Kui on määratud ümardused mitme nurga jaoks, siis enne kaldkriipsu loetletakse kõik horisontaalsed ümardused, ja pärast seda - kõik vertikaalsed.

Näide

Määrame ümarduse 10px kõikide nurkade jaoks:

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

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

Результат:

Näide

Vaatame, kuidas näevad välja ümardused punktiirea puhul:

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

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

Результат:

Näide

Määrame ümarduse 10px ühe diagonaali nurkadele, ja ümarduse 40px - teise diagonaali nurkadele:

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

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

Результат:

Näide

Määrame ümarduse 10px ülemise vasaku nurga jaoks, ümarduse 30px alumise parema nurga jaoks, ja ümardused 50px - teise diagonaali nurkadele:

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

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

Результат:

Näide

Määrame erinevad ümardused iga nurga jaoks:

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

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

Результат:

Näide

Teeme elliptilise ümarduse, määrates 20px horisontaalse osa jaoks, ja 40px - vertikaalse jaoks:

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

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

Результат:

Näide

Nüüd määrame erineva elliptilise ümarduse kõikidele nurkadele eraldi:

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;
}

Результат:

Näide

Kui panna ruudukujulise ploki jaoks ümarduseks väärtus, mis on võrdne poolega ruudu küljest, siis saadakse ring:

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

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

Результат:

Näide

Kui panna ümarduseks väärtus, mis on suurem kui ruudu külg, siis saadakse ikkagi ring:

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

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

Результат:

Näide

Ringi saab ka siis, kui määrata border-radius väärtuseks 50% (eelis on selles, et ruudu mõõtmete muutmisel ei pea muutma ümardust):

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

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

Результат:

Näide

Kui määrata border-radius protsentides ristküliku jaoks, siis saadakse elliptiline ümardus. Kui laius on 400px, kõrgus 200px, ja border-radius väärtusega 10%, siis on see sama, kui oleks kirjutatud 40px/20px:

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

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

Результат:

Näide

Määrame väärtuse border-radius väärtuseks 50% ristküliku jaoks - saame ellipsi:

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

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

Результат:

Näide

Omadus border-radius ümardab mitte ainult piiri nurki, vaid ka tausta:

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

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

Результат:

Vaata ka