Właściwość border-radius

Właściwość border-radius tworzy zaokrąglone rogi dla obramowania i tła. Wartością właściwości są dowolne jednostki wymiarów. Wartość domyślna: 0. Jest skrótem dla właściwości border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Składnia

cssselektor {
  border-radius: wartość;
}

Liczba wartości

Właściwość może przyjmować 1, 2, 3 lub 4 wartości, podawanych poprzez spację:

Zaokrąglenie eliptyczne

Dwie wartości poprzez ukośnik ustawiają eliptyczne zaokrąglenie. Wartość przed ukośnikiem wskazuje zaokrąglenie poziome, a wartości po ukośniku - pionowe:

cssselektor {
  border-style: poziome / pionowe;
}

Jeśli ustawiane są zaokrąglenia dla kilku rogów, to przed ukośnikiem wymieniane są wszystkie poziome zaokrąglenia, a po nim - wszystkie pionowe.

Przykład

Ustawmy zaokrąglenie 10px dla wszystkich rogów:

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

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

Результат:

Przykład

Spójrzmy, jak wyglądają zaokrąglenia dla obramowania w postaci kropek:

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

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

Результат:

Przykład

Ustawmy zaokrąglenie w 10px dla rogów jednej przekątnej, i zaokrąglenia w 40px - dla rogów drugiej przekątnej:

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

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

Результат:

Przykład

Ustawmy zaokrąglenie w 10px dla górnego lewego rogu, zaokrąglenie w 30px dla dolnego prawego rogu, i zaokrąglenia w 50px - dla rogów drugiej przekątnej:

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

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

Результат:

Przykład

Ustawmy różne zaokrąglenia dla każdego z rogów:

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

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

Результат:

Przykład

Zróbmy eliptyczne zaokrąglenie, ustawiając 20px dla poziomej części zaokrąglenia, a 40px - dla pionowej:

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

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

Результат:

Przykład

A teraz ustawmy różne eliptyczne zaokrąglenie dla wszystkich rogów osobno:

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

Результат:

Przykład

Jeśli dla kwadratowego bloku ustawić zaokrąglenia, równe połowie boku kwadratu, to otrzymamy koło:

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

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

Результат:

Przykład

Jeśli ustawić zaokrąglenie, większe niż bok kwadratu, to i tak otrzymamy koło:

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

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

Результат:

Przykład

Koło można również otrzymać, jeśli ustawić border-radius na 50% (zaleta w tym, że przy zmianie wymiarów kwadratu nie trzeba zmieniać zaokrąglenia):

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

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

Результат:

Przykład

Jeśli ustawić border-radius w procentach dla prostokąta, to otrzymamy eliptyczne zaokrąglenie. Jeśli szerokość jest ustawiona na 400px, wysokość na 200px, a border-radius na 10%, to jest to tak, jak by było napisane 40px/20px:

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

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

Результат:

Przykład

Ustawmy wartość border-radius na 50% dla prostokąta - otrzymamy elipsę:

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

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

Результат:

Przykład

Właściwość border-radius zaokrągla nie tylko rogówki obramowania, ale i tła:

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

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

Результат:

Zobacz też