Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break
| Dane w pigułce | |
| Zastosowanie | Zaokrągla narożniki pojemnika |
| Dziedziczenie | nie |
| Wartości | długość w px, pt, em lub procent |
| Wartość domyślna | 0 |
| Przykład | border-radius: 10px |
| Składnia JavaScript | object.style.borderRadius="10px" |
Aby zdefiniować zaokrąglenie, należy wpisać w definicji stylu border-radius : wartość
Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-border-radius : wartość. Firefox 4 nie wymaga prefiksu.
Informacje o zaokrąglaniu poszczególnych narożników zawarte są na stronach border-top-left-radius, border-top-right-radius, border-bottom-left-radius i border-bottom-right-radius. Tutaj przedstawimy techniki związane ze zbiorczym definiowaniem zaokrągleń.
Styl border-radius definiuje wszystkie narożniki jednocześnie. Kod o postaci:
div {width=200px; heigth: 100px; background-color: khaki; border-radius: 10px;}
tworzy jednakowe zaokrąglenie dla wszystkich narożników,
Możemy zdefiniować poszczególne narożniki z osobna, podając cztery kolejne wartości (lewy-górny, prawy-górny, prawy-dolny, lewy-dolny), np.
div {width=200px; heigth: 100px; background-color: khaki; border-radius: 10px 20px 30px 40px;}
Możemy podać dwie kolejne wartości, które definiują odpowiednio lewy-górny i prawy-dolny oraz prawy-górny i lewy-dolny narożnik, np.
div {width=200px; heigth: 100px; background-color: khaki; border-radius: 30px 60px;}
Powyższe wartości definiują poszczególne narożniki jako pojedyncze liczby. Użycie pary wartości rozdzielonych ukośnikiem pozwala zróżnicować zaokrąglenia, modyfikując stopień zaokrąglenia z jednej i drugiej strony danego narożnika. W poniższym przykładzie wszystkie narożniki są definiowane tą samą parą 40/20.
div {width=200px; heigth: 100px; background-color: khaki; border-radius: 40px / 20px;}
Wartości mogą stanowić 50% boku pojemnika, co przy równych bokach tworzy okrąg:
Ze względu na interpretację w Operze i Firefoksie powinniśmy jednak podać nie 50%, lecz dopasowaną wartość w pikselach, np. 100px; dla pojemnika o wymiarach 200x200.
Jeśli pojemnik jest prostokątem o nierównych parach boków, użycie 50% boku pojemnika tworzy elipsę:
Ze względu na interpretację w Operze i Firefoksie powinniśmy jednak podać nie 50%, lecz dopasowaną parę wartości w pikselach, np. 100px / 50px; dla pojemnika o wymiarach 200x100.
Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.
