Добавьте закругленные углы к торцевым сторонам блока и встроенным торцевым сторонам некоторых элементов::
#example1 {
background-color: lightblue;
border-end-end-radius: 50px;
}
#example2 {
background-color: lightblue;
border-end-end-radius: 50px 20px;
}
#example3 {
background-color: lightblue;
border-end-end-radius: 50%;
direction: rtl;
}
#example4
{
background-color: lightblue;
border-end-end-radius:
50%;
writing-mode: vertical-rl;
}
Попробуйте сами »
Определение border-end-end-radius
CSS свойство border-end-end-radius определяет радиус угла между торцевой стороной блока и торцевой стороной встроенного элемента.
Примечание: Связанные CSS свойства
writing-mode,
text-orientation и
direction определяют блочные и встроенные направления.
Вот почему эти свойства также влияют на результат CSS свойства border-end-end-radius. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
Если CSS свойство border-end-end-radius имеет два значения, угол будет представлять собой эллипс:
- border-end-end-radius: 50px 100px;
Если CSS свойство border-end-end-radius имеет одно значение, углом будет круг:
- border-end-end-radius: 50px;
CSS свойство
border-end-end-radius очень похоже на свойства
border-bottom-left-radius,
border-bottom-right-radius,
border-top-left-radius и
border-top-right-radius, но свойство
border-end-end-radius зависит от блочных и встроенных направлений.
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderEndEndRadius="50px" Попробуй |
Поддержка border-end-end-radius
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-end-end-radius | 89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
Синтаксис border-end-end-radius
border-end-end-radius: 0|length|initial|inherit;
Значения border-end-end-radius
| Значение | Описание | Демонстрация |
|---|---|---|
| 0 | Значение по умолчанию. | Демо ❯ |
| length | Определяет форму угла в block-end и inline-end. Читайте о единицы измерения длины | Демо ❯ |
| % | Определяет форму угла в block-end и inline-end в процентах от длины элемента на соответствующей оси. | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-end-end-radius
Свойство direction
На положение закругленного угла в конце блока и встроенные направления влияет CSS свойство direction:
#example1 {
border: 2px solid red;
direction: rtl;
border-end-end-radius: 25px;
}
Попробуйте сами »
Свойство writing-mode
На положение закругленного угла в конце блока и встроенные направления влияет CSS свойство writing-mode:
#example2 {
border: 2px solid red;
writing-mode: vertical-rl;
border-end-end-radius: 25px;
}
Попробуйте сами »
Страницы по теме border-end-end-radius
CSS Учебник: CSS Закругленные углы
CSS border-bottom-left-radius свойство: CSS border-bottom-left-radius свойство
CSS border-bottom-right-radius свойство: CSS border-bottom-right-radius свойство
CSS border-top-left-radius свойство: CSS border-top-left-radius свойство
CSS border-top-right-radius свойство: CSS border-top-right-radius свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство