CSS3 - obramowania

CSS3 - border-top-right-radius

środa, 09 luty 2011 09:09 pwimmer
Drukuj

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 prawy 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-right-radius: 10px
Składnia JavaScript object.style.borderTopRightRadius="10px"

Aby zdefiniować zaokrąglenie, należy wpisać w definicji stylu border-top-right-radius : wartość

Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-border-radius-topright : wartość. Firefox 4 nie wymaga prefiksu.

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

div {width=200px; heigth: 100px; background-color: khaki; border-top-right-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 prawym brzegu), czyli border-top-right-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.