Свойство border-bottom-right-radius
Свойство border-bottom-right-radius — задает радиус скругления правого нижнего угла элемента.
Допустимые значения
- — точное значение радиуса (не может быть отрицательным)
- — значение радиуса в процентах.
Есть возможность задать эллиптические радиусы используя пробел. Значение до пробела — радиус по оси х, а после пробела — радиус по оси у.
Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.
| Значение по умолчанию | 0 |
|---|---|
| Применимо | ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’. |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
.block {
width:100px;
height:50px;
border-bottom-right-radius: 10px 20px;
border: 1px solid #000;
}
Твой код:
Результат:
большой полигон
Заметки
Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.
Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-border-bottom-right-radius, а Firefox 1.0 и выше -moz-border-radius-bottomright, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-bottom-right-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius-bottomright рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше.