CSS border-top-right-radius Свойство
Пример
Добавьте скругленные границы в правый верхний угол двух элементов <div>:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Подробнее примеры ниже.
Определение и использование
Свойство border-top-right-radius определяет радиус верхнего правого угла.
Совет: Это свойство позволяет добавлять округленные границы к элементам!
| Значение по умолчанию: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.borderTopRightRadius="25px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| border-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Синтаксис CSS
border-top-right-radius: length|% [length|%]|initial|inherit;
Примечание: Если задано два значения, первое — для верхней границы, а второе — для правой границы. Если второе значение опущено, оно копируется из первого. Если любая из длин равна нулю, то угол равен квадрату, а не округляется.
Значения свойств
| Значение | Описание | |
|---|---|---|
| length | Определяет форму верхнего правого угла. Читать о единицах длины | |
| % | Определяет форму верхнего правого угла в % | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Добавьте округленные границы в верхний правый угол в процентах:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
Похожие страницы
CSS Справочник: CSS Rounded Corners
HTML DOM Справочник: borderTopRightRadius Свойство