Lastnost border-radius

Lastnost border-radius ustvarja zaobljene vogale za obrobo in ozadje. Vrednost lastnosti so poljubne enote za velikosti. Privzeta vrednost je: 0. Je okrajšava za lastnosti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksa

cssselektor {
  border-radius: vrednost;
}

Število vrednosti

Lastnost lahko sprejme 1, 2, 3 ali 4 vrednosti, ločene s presledkom:

Eliptično zaokroževanje

Dve vrednosti, ločeni s poševnico, nastavita eliptično zaokroževanje. Vrednost pred poševnico določa vodoravno zaokroževanje, vrednost za poševnico pa - navpično:

cssselektor {
  border-radius: vodoravno / navpično;
}

Če so določene zaokrožitve za več vogalov, so pred poševnico naštete vse vodoravne zaokrožitve, za njo pa - vse navpične.

Primer

Nastavimo zaokrožitev 10px za vse vogale:

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

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

Результат:

Primer

Poglejmo, kako izgleda zaokroževanje za obrobo v obliki pik:

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

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

Результат:

Primer

Nastavimo zaokrožitev v 10px za vogale ene diagonale in zaokrožitev v 40px - za vogale druge diagonale:

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

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

Результат:

Primer

Nastavimo zaokrožitev v 10px za zgornji levi vogal, zaokrožitev v 30px za spodnji desni vogal in zaokrožitev v 50px - za vogale druge diagonale:

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

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

Результат:

Primer

Nastavimo različne zaokrožitve za vsak od vogalov:

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

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

Результат:

Primer

Naredimo eliptično zaokroževanje, tako da nastavimo 20px za vodoravni del zaokrožitve in 40px - za navpični:

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

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

Результат:

Primer

Zdaj pa nastavimo različno eliptično zaokroževanje za vse vogale posebej:

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

Результат:

Primer

Če za kvadratni blok nastavimo zaokrožitev, enako polovici stranice kvadrata, dobimo krog:

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

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

Результат:

Primer

Če nastavimo zaokrožitev, večjo od stranice kvadrata, bomo vseeno dobili krog:

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

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

Результат:

Primer

Krog lahko dobimo tudi, če nastavimo border-radius na 50% (prednost je v tem, da pri spreminjanju velikosti kvadrata ne bo treba spreminjati zaokrožitve):

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

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

Результат:

Primer

Če nastavimo border-radius v odstotkih za pravokotnik, dobimo eliptično zaokroževanje. Če je širina nastavljena na 400px, višina na 200px, border-radius pa na 10%, je to enako, kot če bi bilo napisano 40px/20px:

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

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

Результат:

Primer

Nastavimo vrednost border-radius na 50% za pravokotnik - dobimo elipso:

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

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

Результат:

Primer

Lastnost border-radius ne zaokrožuje le vogalov obrobe, temveč tudi ozadja:

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

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

Результат:

Glejte tudi