Border-radius-ominaisuus

Ominaisuus border-radius luo pyöristetyt kulmat reunuksille ja taustalle. Ominaisuuden arvona käyvät mitkä tahansa koko-yksiköt. Oletusarvo: 0. Se on lyhenne ominaisuuksille border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntaksi

cssvalitsija {
  border-radius: arvo;
}

Arvojen määrä

Ominaisuus voi ottaa 1, 2, 3 tai 4 arvoa, jotka annetaan välilyönnillä erotettuna:

Elliptinen pyöristys

Kaksi arvoa vinoviivalla erotettuna asettavat elliptisen pyöristyksen. Arvo ennen vinoviivaa osoittaa vaakatasoisen pyöristyksen, ja arvo vinoviivan jälkeen - pystytasoisen:

cssvalitsija {
  border-radius: vaaka / pysty;
}

Jos asetetaan pyöristyksiä useille kulmille, niin ennen vinoviivaa luetellaan kaikki vaakatasoiset pyöristykset, ja sen jälkeen - kaikki pystytasoiset.

Esimerkki

Asetetaan pyöristys 10px kaikille kulmille:

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

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

Результат:

Esimerkki

Katsotaan miltä pyöristykset näyttävät pisteistä koostuvalla reunuksella:

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

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

Результат:

Esimerkki

Asetetaan pyöristys 10px toisen diagonaalin kulmille, ja pyöristys 40px - toisen diagonaalin kulmille:

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

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

Результат:

Esimerkki

Asetetaan pyöristys 10px ylävasemmalle kulmalle, pyöristys 30px alaoikealle kulmalle, ja pyöristys 50px - toisen diagonaalin kulmille:

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

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

Результат:

Esimerkki

Asetetaan erilaiset pyöristykset jokaiselle kulmalle:

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

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

Результат:

Esimerkki

Tehdään elliptinen pyöristys, asettaen 20px vaakatasoiselle osalle pyöristystä, ja 40px - pystytasoiselle:

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

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

Результат:

Esimerkki

Asetetaan nyt erilainen elliptinen pyöristys kaikille kulmille erikseen:

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

Результат:

Esimerkki

Jos neliömäiselle lohkolle asetetaan pyöristys, joka on puolet neliön sivusta, saadaan ympyrä:

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

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

Результат:

Esimerkki

Jos asetetaan pyöristys, joka on suurempi kuin neliön sivu, saadaan silti ympyrä:

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

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

Результат:

Esimerkki

Ympyrän voi saada myös asettamalla border-radius arvoon 50% (etu siihen, että neliön koon muuttuessa ei tarvitse vaihtaa pyöristystä):

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

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

Результат:

Esimerkki

Jos asetetaan border-radius prosentteina suorakaiteelle, saadaan elliptinen pyöristys. Jos leveys on 400px, korkeus 200px, ja border-radius 10%, niin se on sama kuin jos olisi kirjoitettu 40px/20px:

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

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

Результат:

Esimerkki

Asetetaan arvo border-radius 50% suorakaiteelle - saadaan ellipsi:

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

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

Результат:

Esimerkki

Ominaisuus border-radius pyöristää ei vain reunuksen kulmia, vaan myös taustaa:

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

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

Результат:

Katso myös