Własność CSS border-top-right-radius

Własność CSS border-top-right-radius definiuje zaokrąglanie prawego górnego rogu elementu. Mimo że w jej nazwie jest słowo border, oznaczające obramowanie, róg zostanie zaokrąglony nawet wtedy, gdy element nie będzie miał zdefiniowanego obramowania. Aby efekt był widoczny, wystarczy, aby element miał inne tło niż jego otoczenie.

Przykład użycia własności border-top-right-radius

W poniższym przykładzie element figure będzie miał zaokrąglony prawy górny róg.

figure {
  background-color: lightpink;
  width: 200px;
  height: 40px;
  border-top-right-radius: 10px;
}
...
<figure></figure>

Efekt:

Składnia i typy wartości

Własność border-top-right-radius przyjmuje jedną lub dwie liczby z jednostką lub jedną albo dwie wartości procentowe. Definiują one długość promienia wyznaczającego ćwiartkę elipsy, której łuk określa kształt zaokrąglenia.

Jeśli zostanie podana tylko jedna wartość, to przeglądarka automatycznie przyjmuje, że oba promienie elipsy mają taką samą długość, czyli jest ona okręgiem. Spójrz na poniższą ilustrację.

Ten przykład dotyczy ustawienia border-top-right-radius: 40px – zaokrąglenie prawego górnego rogu elementu kształtem łuku okręgu o promieniu 40 pikseli.

Jeśli zostaną podane dwie wartości rozdzielone spacją, to powstanie zaokrąglenie eliptyczne, np.:

border-top-right-radius: 120px 30px;

Efekt tej deklaracji będzie taki:

Pierwsza wartość definiuje długość pierwszego (poziomego) promienia elipsy, a druga – długość drugiego (pionowego) promienia elipsy, której łuk określa kształt narożnika.

Wartości procentowe

Wartości procentowe odnoszą się do szerokości i wysokości elementu, którego dotyczy dana deklaracja, np.:

div {
  background-color: lightgreen;
  width: 200px;
  height: 100px;
  border-top-right-radius: 20% 30%;
}

Ta reguła ustawi zaokrąglenie prawego górnego rogu elementu div w kształcie łuku elipsy, której pierwszy promień ma 40 pikseli długości (20% z 200), a drugi – 30 pikseli długości (30% ze 100).

Zaokrąglenie fizyczne i logiczne

Wszystkie własności obramowania, w tym także border-top-right-radius, należą do modułu własności i wartości logicznych CSS, a więc występują w dwóch odmianach – fizycznej i logicznej. Powyżej została opisana własność fizyczna, czyli w jej przypadku kierunki są określane w odniesieniu do okna przeglądarki, a więc lewy górny róg to ten który znajduje się najbliżej lewego górnego rogu okna przeglądarki, prawy dolny róg to ten, który znajduje się najbliżej prawego dolnego rogu okna przeglądarki itd.

W logicznych własnościach CSS kierunki są określane nie względem okna przeglądarki, tylko w odniesieniu do kierunku i orientacji tekstu, dlatego mogą one mieć różne znaczenie w zależności od tego, czy tekst jest pisany od góry, czy od dołu oraz czy jest pisany od lewej czy od prawej.

Aby dowiedzieć się więcej, przeczytaj szczegółowy opis własności logicznych i opis logicznych własności zaokrąglenia obramowania.

Zastosowanie

Własność border-top-right-radius ma zastosowanie do wszystkich elementów, a także do pseudoelementu ::first-letter.

Specyfikacja CSS nie wymaga, aby własność ta działała na elementach tabeli z ustawieniem własności border-collapse na collapse, ale większość przeglądarek obsługuje ją także w tej sytuacji.

Podsumowanie