Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - obramowania

CSS3 - border-top-left-radius

Email Drukuj PDF

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 górny narożnik pojemnika
Dziedziczenie nie
Wartości długość w px, pt, em lub procent
Wartość domyślna 0
Przykład border-top-left-radius: 10px
Składnia JavaScript object.style.borderTopLeftRadius="10px"

Aby zdefiniować zaokrąglenie, należy wpisać w definicji stylu border-top-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-topleft : wartość. Firefox 4 nie wymaga prefiksu.

Styl border-top-left-radius służy do tworzenia zaokrąglenia lewego górnego narożnika pojemnika.

div {width=200px; heigth: 100px; background-color: khaki; border-top-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 górnym brzegu) 30px (zasięg na lewym brzegu), czyli border-top-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.

 

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