Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zaokrąglanie narożników - prawy górny

Email Drukuj PDF

border-top-right-radius

Dostępne wartości:

wartość liczbowa | procent | inherit

Wartość domyślna:

0

Przykład:

div { border-top-right-radius: 5px 10px;}

Dziedziczenie:

Nie

Obsługa:

Chrome

Za pomocą stylu border-top-right-radius możemy wymusić zaokrąglenie prawego 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 prawej krawędzi ramki. Podana wartość określa miejsce, od którego ma zacząć zaokrąglać się narożnik. 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-right-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-right-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.24.

<<przykład>>

<div class="przyklad">

<div style="width:250px;height:100px;background-color:#C0FFC0;border-top-right-radius: 50px 50px;border:solid 3px red;">&nbsp;</div>

</div>

<</przykład>>

Rysunek 15.24. Przykład elementu z zaokrąglonym prawym górnym narożnikiem

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15342732