Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

border-top-left-radius

Свойство CSS border-top-left-radius используется для скругления верхнего левого угла фона элемента. Если имеется рамка элемента, то она тоже скругляется. Важно понимать, что форма самого элемента в любом случае остается прямоугольной.

Для скругления сразу всех углов элемента можно использовать свойство border-radius.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства border-top-left-radius является одна или две (разделенных пробелом) величины указывающие радиус скругления. Две величины используются для создания овальных (эллиптических) скруглений, где первая отвечает за радиус по горизонтали (ось X), а вторая — по вертикали (ось Y). Допустимые единицы измерения:

Процентная запись: относительно ширины или высоты элемента (в зависимости от места использования) с учетом размеров рамки и внутренних отступов.

Значение по умолчанию: 0.

Пример скругления верхнего левого угла с разными вариантами значений.

Использование свойства CSS border-top-left-radius

Обратите внимание, что координаты отсчитываются от внешнего края рамки.

Синтаксис

border-top-left-radius: [размеры | проценты] [размеры | проценты]

Пример CSS: использование border-top-left-radius

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство border-top-left-radius</title>
  <style type="text/css">
   div {
    height: 70px; /* высота блоков DIV */
    background: #66ff66; /* их фон */
    margin-bottom: 5px; /* размер нижнего поля */
   }
   .div1 {
    border-top-left-radius: 30px; /* cкругление уголка */
   }
   .div2 {
    border: #000000 3px solid; /* стиль рамки */
    border-top-left-radius: 20% 30%;
    padding-left: 20%; /* размер левого внутреннего отступа */
   }
  </style>
 </head>
 <body>
  <div class="div1">DIV1 - border-top-left-radius: 30px.</div>
  <div class="div2">DIV2 - border-top-left-radius: 20% 30%.</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-top-left-radius в браузере Opera.

Использование свойства CSS border-top-left-radius в браузере Opera

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и вышеДо 4.0От 4.0 до 7.07.0 и вышеДо 4.04.0 и вышеДо 10.510.5 и вышеДо 5.05.0 и выше
Поддержка:НетДаНетЧастичноДаНетДаНетДаНетЧастично

Google Chrome до версии 7.0 и Safari с версии 5.0 не понимают процентные значения border-top-left-radius.