border-top-left-radius

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.5+	3.0+	1.0+	2.1+	1.0+

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

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#border-top-left-radius

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Свойство border-top-left-radius закругляет границу левого верхнего угла элемента. Если рамка не задана, то скругление также происходит и с фоном. Могут быть использованы положительные значения чисел, а также процентные соотношения, записанные через пробел (по оси x и y). Если нужно указать процентное соотношение, то первым значением идёт значение x, зависящее от ширины блока, а второе значение y, зависящее от высоты блока. То есть, если блок 100 x 100 px, а процентная запись равна border-top-left-radius:10% 10%;, закругление будет происходить величиной равной 10px. Можно указать и 2 числовых значения, где первое значение указывается для ширины, а второе для высоты, записывается через пробел. Значения для эллипсных углов прописываются с теми же правилами, что и числовые с процентными, но с добавлением слэша (/). Пример:border-top-left-radius:10px/10px 10%/10%;. Свойство применимо к элементам, кроме элементов таблицы, у которых свойство border-collapse сопровождается значением collapse. Свойство создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Синтаксис

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

Значения

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

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

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

Дополнительные свойства применяемые к border-top-left-radius

Свойство	Описание
border-radius	Сокращённый вид записи для всех четырёх углов
-webkit-border-top-left-radius	Альтернативное свойство для Safari и Chrome
-moz-border-radius-topleft	Альтернативное свойство для Mozila

Дополнительные значения применяемые к border-top-left-radius

Значение	Описание
<Число>	Любое положительное число
<Процент>	Значение в процентах

Пример 1

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
 <meta charset="utf-8">
 <title>border-top-left-radius</title>
 <style>
 .title {
 background: #000080; /* Цвет фона */
 color: #ffe; /* Цвет текста */
 padding: 7px; /* Поля вокруг текста */ 
 border-top-left-radius: 10px; /* Левый верхний уголок */
 border-top-right-radius: 10px; /* Правый верхний уголок */
 }
 .content {
 border: 1px solid #000080; /* Параметры рамки */
 background: #f0f0f0; /* Цвет фона */
 padding: 7px; /* Поля вокруг текста */ 
 border-bottom-left-radius: 10px; /* Левый нижний уголок */
 border-bottom-right-radius: 10px; /* Правый нижний уголок */
 }
 </style>
 </head> 
 <body> 
 <div class="title">Буквица</div>
 <div class="content">
 Буквица является художественным приемом оформления текста и 
 представляет собой увеличенную первую букву, базовая линия 
 которой ниже на одну или несколько строк базовой линии 
 основного текста. 
 </div>
 </body> 
</html>

Пример 1 в действии

Буквица

Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста.

Пример 2 применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-top-left-radius</title>
<meta charset="utf-8">
<style type="text/css">
<!--
div {
border:10px double red;
padding:10px;
color:#fff;
width:300px;
height:70px;
background:green;
border-top-left-radius:80px;
}
-->
</style>
</head>
<body>
<div>Закругляем левый верхний угол</div>
</body>
</html>

Пример 2 в действии

Браузеры

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

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Углы | Добавил: evkuriy (06.07.2013)

Просмотров: 1000 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

border-top-left-radius

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

Версии CSS

Описание

Синтаксис

Значения

Дополнительные свойства применяемые к border-top-left-radius

Свойство

Описание

Дополнительные значения применяемые к border-top-left-radius

Значение

Описание

Пример 1

Пример 1 в действии

Пример 2 применения свойства

Пример 2 в действии

Браузеры