CSS border-bottom-left-radius Property
Przykład
Dodaj zaokrąglone obramowania w lewym dolnym rogu dwóch elementów <div>:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość border-bottom-left-radius
definiuje promień lewego dolnego narożnika.
Wskazówka: ta właściwość pozwala dodawać zaokrąglone obramowania do elementów!
Domyślna wartość: | 0 |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.borderBottomLeftRadius="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-bottom-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Składnia CSS
border-bottom-left-radius: length|% [length|%]|initial|inherit;
Uwaga: Jeśli ustawisz dwie wartości, pierwsza dotyczy dolnej granicy, a druga lewej krawędzi. Jeśli druga wartość zostanie pominięta, zostanie skopiowana z pierwszej. Jeśli którakolwiek długość wynosi zero, róg jest kwadratowy, a nie zaokrąglony.
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner 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
Dodaj zaokrąglone obramowania w lewym dolnym rogu w procentach:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
Powiązane strony
Samouczek CSS: zaokrąglone rogi CSS
Odniesienie HTML DOM: właściwość borderBottomLeftRadius