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 lewy dolny narożnik pojemnika |
Dziedziczenie | nie |
Wartości | długość w px, pt, em lub procent |
Wartość domyślna | 0 |
Przykład | border-bottom-left-radius: 10px |
Składnia JavaScript | object.style.borderBottomLeftRadius="10px" |
Aby zdefiniować zaokrąglenie, należy wpisać w definicji stylu border-bottom-left-radius : wartość
Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-border-radius-bottomleft : wartość. Firefox 4 nie wymaga prefiksu.
Styl border-bottom-left-radius
służy do tworzenia zaokrąglenia lewego dolnego narożnika pojemnika.
div {width=200px; heigth: 100px; background-color: khaki; border-bottom-left-radius: 10px;}
Im większa wartość zaokrąglenia, tym jest ono silniejsze. Dla 30px:
Wartości po obu stronach zaokrąglenia nie muszą być identyczne - można zastosować parę wartości, np. 50px (zasięg na dolnym brzegu) 30px (zasięg na lewym brzegu), czyli border-bottom-left-radius: 50px 30px;
:
Wartości mogą stanowić 50% boku pojemnika, co przy równych bokach tworzy fragment okręgu:
Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.