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