Własność CSS border-end-end-radius definiuje logiczne zaokrąglenie rogu elementu, zależne od kierunku i orientacji tekstu. Dotyczy rogu znajdującego się u zbiegu końca końcowej krawędzi obramowania w orientacji blokowej i końca końcowej krawędzi obramowania w orientacji śródliniowej.
W przypadku tekstu pisanego od lewej i od góry własność ta odpowiada fizycznej własności border-bottom-right-radius
.
Mimo że w nazwie tej własności znajduje się 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-end-end-radius
W poniższym przykładzie element figure
będzie miał zaokrąglony prawy dolny róg (przy założeniu, że tekst jest poziomy i pisany od lewej).
Efekt:
Składnia i typy wartości
Własność border-end-end-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-end-end-radius: 40px
– zaokrąglenie prawego dolnego rogu elementu kształtem łuku okręgu o promieniu 40 pikseli (przy założeniu, że tekst jest poziomy i pisany od lewej).
Jeśli zostaną podane dwie wartości rozdzielone spacją, to powstanie zaokrąglenie eliptyczne, np.:
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.:
Ta reguła ustawi zaokrąglenie prawego dolnego 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) – przy założeniu, że tekst jest poziomy i pisany od lewej.
Zaokrąglenie fizyczne i logiczne
Wszystkie własności obramowania, w tym także border-end-end-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ść logiczna, czyli w jej przypadku kierunki są określane w odniesieniu do kierunku i orientacji tekstu.
Natomiast własności fizyczne odnoszą się do krawędzi 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.
Aby dowiedzieć się więcej na ten temat, przeczytaj szczegółowy opis własności logicznych i opis logicznych własności zaokrąglenia obramowania.
Zastosowanie
Własność border-end-end-radius
ma zastosowanie do wszystkich elementów, a także do pseudoelementu ::first-letter
.
Podsumowanie
Zastosowanie | Wszystkie elementy HTML i pseudoelement ::first-letter |
---|---|
Obsługiwane wartości |
|
Wartość początkowa | 0 |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – border-end-end-radius |