Atrybut border-radius CSS

Definicja i użycie

Atrybut border-radius jest atrybutem skróconym, który służy do ustawienia czterech atrybutów border-*-radius.

Wskazówka:Ta właściwość pozwala na dodanie zaokrąglonych krawędzi do elementu!

Zobacz również:

CSS3 Tutorial:Krawędzie CSS3

Przykład

Dodaj zaokrąglone krawędzie do elementu div:

div
{
border:2px solid;
border-radius:25px;
}

Spróbuj sam!

Więcej przykładów znajduje się na dole strony.

CSS Syntax

border-radius: 1-4 length|% / 1-4 length|%;

Komentarz:Ustawia cztery wartości dla każdego radiusa w tej kolejności. Jeśli pominie się dolny-lewy, będzie on identyczny z górnym-prawym. Jeśli pominie się dolny-prawy, będzie on identyczny z górnym-lewym. Jeśli pominie się górny-prawy, będzie on identyczny z górnym-lewym.

Wartość atrybutu

Wartość Opis Test
length Definiowanie kształtu zaokrąglonych krawędzi. Test
% Definiowanie kształtu zaokrąglonych krawędzi w procentach. Test

Przykład 1

border-radius:2em;

Ekwiwalent:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Przykład 2

border-radius: 2em 1em 4em / 0.5em 3em;

Ekwiwalent:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Techniczne szczegóły

Domyślna wartość: 0
Inheredność: nie
Wersja: CSS3
JavaScript Syntax: object.style.borderRadius="5px"

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5