border-bottom-left-radius

Содержание

Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам

Синтаксис

border-bottom-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-left-radius</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head> 
 <body> 
  <div style="border-bottom-left-radius: 20px" class="radius">
   border-bottom-left-radius: 20px
  </div>
  <div style="border-bottom-left-radius: 70px 40px" class="radius">
   border-bottom-left-radius: 70px 40px
  </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Радиус скругления

Рис. 2. Радиус скругления

Объектная модель

Объект.style.borderBottomLeftRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-bottom-left-radius.

Firefox до версии 4.0 использует свойство -moz-border-radius-bottomleft.

Спецификация

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация

Браузеры

 Internet ExplorerChromeOperaSafariFirefox
Базовый синтаксис91410.53514
Проценты9410.554
Эллиптические уголки9110.533.5
 AndroidFirefox MobileOpera MobileSafari Mobile
Базовый синтаксис12.11410.535
Проценты2.1410.55
Эллиптические уголки2.13.510.53




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 12:59 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru