CSS border-radius Property
Przykład
Dodaj zaokrąglone rogi do dwóch elementów <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość border-radiusokreśla promień narożników elementu.
Wskazówka: ta właściwość pozwala dodawać zaokrąglone rogi do elementów!
Ta właściwość może mieć od jednej do czterech wartości. Oto zasady:
Cztery wartości - border-radius: 15px 50px 30px 5px; (pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego rogu, trzecia wartość dotyczy prawego dolnego rogu, a czwarta wartość dotyczy lewego dolnego rogu):
Trzy wartości - border-radius: 15px 50px 30px; (pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego i lewego dolnego rogu, a trzecia wartość dotyczy prawego dolnego):
Dwie wartości - border-radius: 15px 50px; (pierwsza wartość dotyczy rogów lewego górnego i prawego dolnego, a druga rogów prawego górnego i lewego dolnego):
Jedna wartość - border-radius: 15px; (wartość dotyczy wszystkich czterech rogów, które są zaokrąglone równomiernie:
| Domyślna wartość: | 0 |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | tak. Przeczytaj o animacji |
| Wersja: | CSS3 |
| Składnia JavaScript: | obiekt .style.borderRadius="25px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- lub -moz- określają pierwszą wersję, która działała z przedrostkiem.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Składnia CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Uwaga: cztery wartości dla każdego promienia są podane w kolejności góra-lewy, górny-prawy, dolny-prawy, dolny-lewy. Jeśli lewy dolny jest pominięty, jest taki sam jak prawy górny. Jeśli prawy dolny jest pominięty, jest taki sam jak lewy górny. Jeśli prawy górny jest pominięty, jest taki sam jak lewy górny.
Wartości nieruchomości
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw zaokrąglone rogi dla elementu z kolorem tła:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Przykład
Ustaw zaokrąglone rogi dla elementu z ramką:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Przykład
Ustaw zaokrąglone rogi dla elementu z obrazem tła:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Przykład
Zwróć też uwagę na to:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
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; */
Powiązane strony
Samouczek CSS: zaokrąglone rogi CSS
Odniesienie HTML DOM: właściwość borderRadius