|
border-top-left-radius |
|
|
Dostępne wartości: |
wartość liczbowa | procent | inherit |
|
Wartość domyślna: |
0 |
|
Przykład: |
div { border-top-left-radius: 5px 10px;} |
|
Dziedziczenie: |
Nie |
|
Obsługa: |
Chrome |
Za pomocą stylu border-top-left-radius możemy wymusić zaokrąglenie lewego górnego narożnika ramki wybranego elementu strony, np. <DIV>.
Bezpośrednio po nazwie stylu za pomocą dodatnich liczb całkowitych lub procentów musimy określić stopień zaokrąglenia. Pierwsza wartość odnosi się do górnej, a druga do lewej krawędzi ramki. Podana wartość określa miejsce, od którego narożnik ma zacząć się zaokrąglać. Wartości dla obu krawędzi mogą być różne, co pozwala na tworzenie zaokrągleń o zróżnicowanym kształcie. Podanie jednej wartości powoduje, że przeglądarka automatycznie zastosuje identyczną wartość względem drugiej krawędzi.
Odpowiedni zapis w arkuszu stylów może mieć postać:
DIV
{
border-top-left-radius:50px 50px;
width:250px;
height:100px;
background-color:#C0FFC0;
border:solid 3px red;
}
Użytkownicy przeglądarki Chrome efekt działania stylu border-top-left-radius zobaczą poniżej. Natomiast posiadacze Opery, Internet Explorera oraz Safari i Mozilli Firefox, aby zobaczyć, jak działa omawiany styl, muszą zadowolić się rysunkiem 15.23, ponieważ ich przeglądarki nie wspierają tego elementu.
<<przykład>>
<div class="przyklad">
<div style="width:250px;height:100px;background-color:#C0FFC0;border-top-left-radius: 50px 50px;border:solid 3px red;"> </div>
</div>
<</przykład>>
|
|
Rysunek 15.23. Przykład elementu z zaokrąglonym lewym górnym narożnikiem |
