Border radius css top left: CSS border-top-left-radius property

Leave a Comment / Css / By /

создаём закруглённые углы с помощью CSS — deadblog.ru

Замечательное свойство CSS3 border-raduis позволяет легко создавать закруглённые углы без использования изображений или лишних div тэгов. Это одно из полезнейших и обсуждаемых CSS3 свойств.

С первого анонса в 2005 году, свойство border radius стали поддерживать практически все современные браузеры (хоть и с некоторыми особенностями, о которых будет сказано ниже). А из-за простоты использования веб-разработчик может без труда применять данную технологию в своих проектах.

Приведу простой пример:

Бокс с закруглёнными углами, корректно отображающийся в Firefox, Safari/Chrome, Opera и IE9.

В теории, код для данного примера очень простой:

#example1 {
  border-radius: 15px;
}

Однако, не всё так просто. Для совместимости с Firefox, нужно использовать префикс -moz- (об этом читай секцию поддержки браузеров, moz border radius):

#example1 {
  -moz-border-radius: 15px;
  border-radius: 15px;
}

Как это работает

Существует два способа. Закруглённые углы можно создавать индивидуально для каждого угла, используя свойство border-*-radius (border-bottom-left-radius, border-top-left-radius, и т.д.), либо используя более короткое свойство border-radius.

Давайте для начала рассмотрим как использовать свойство для создания индивидуальных углов border-*-radius, а после разберём короткий аналог border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

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

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

Синтаксис:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

Пример:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

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

Если указано всего одно значение, то оно определяет как горизонтальный так и вертикальный радиус.

На рисунке отображено несколько примеров разных значений и соответствующих им углов:

Если какое-либо значение будет равно нулю, то угол будет квадратный, а не круглый.

border-radius

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

Синтаксис:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Пример:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырёх углов. Опциональный второй набор значений, указаный после слеша, определяет вертикальные радиусы для всех четырёх углов.

Если указан только один набор значений, то он используется одинаково для определения вертикальных и горизонтальных углов.

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

Поддержка браузеров

В настоящее время Opera (версия 10,5 и старше), Safari (версия 5 и старше) Chrome (версия 5 и старше) поддерживают как border-radius, так и индивидуальные свойства border-*-radius, описанные в текущей спецификации W3C (хотя ещё есть много мелких ошибок и несогласований, таких как например границы перехода, использование процентов в длине и т.д.).

Mozilla Firefox (версия 1.0 и старше) поддерживает свойство border-radius с префиксом -moz-, хоть и есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (об этом ниже).

Последние версии браузера Firefox понимают border-radius без префикса -moz-.

Safari и Chrome (а так-же другие браузеры, основанные на движке webkit) поддерживают border-radius с префиксом -webkit- начиная с 3 версии (с 5 версии префикс уже не нужен), но так-же с некоторыми отклонениями от текущей спецификации.

Internet Explorer 9 абсолютно так-же поддерживает свойство border radius.

Префикс -moz-

Начиная с 1-ой версии, браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz-. Однако, браузер только начиная с версии 3.5 стал использовать эллиптические углы, т.е. стал принимать два значения для угла, что-бы определить вертикальный и горизонтальный радиусы самостоятельно. До версии 3.5 браузер принимает только по одному значению для каждого угла, в результате чего одинаковы вертикальные и горизонтальные радиусы для угла одинаковы.

Синтаксис, как и написано в данной статье использует префикс -moz-. Основное различие только в названиях отдельных границ свойства border-*-radius, с префиксом -moz- всё выглядит немного по другому:

W3C SpecificationMozilla Implementation
border-top-left-radius-moz-border-radius-topleft
border-top-right-radius-moz-border-radius-topright
border-bottom-right-radius-moz-border-radius-bottomright
border-bottom-left-radius-moz-border-radius-bottomleft

Метод с использованием процентов при реализации для браузера Mozilla немного отличается. Об этом можно подробней прочитать в Центре Разработчиков Mozilla здесь.

Кросс-браузерные примеры

Несколько базовых примеров, которые отлично работают в текущих версиях Firefox, Safari/Chrome, Opera и IE9:

A

B

C

D

E

F

 

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

Примечание

Данная статья — это всего-лишь вольный перевод замечательной статьи Border-radius: create rounded corners with CSS!, которая естественно содержит ошибки и неточности перевода. Если таковые будут найдены — просьба сообщить мне (:

seodon.ru | CSS справочник — border-top-left-radius

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

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

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

Тип свойства

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

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

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

Значения

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

  • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента с учетом внутренних отступов (padding) и рамки (border).
    Отрицательные значения (-20%) указывать нельзя.
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.

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

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

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

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

Синтаксис

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>DIV1 - border-top-left-radius: 30px.</div>
  <div>DIV2 - border-top-left-radius: 20% 30%.</div>
 </body>
</html>

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

Результат. Использование свойства 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.

CSS граница-верхний-левый радиус

Пример <стиль> .круглая граница { ширина: 200 пикселей; отступ: 30 пикселей; граница: 1px сплошной малиновый; граница-верхний-левый-радиус: 35px 20px; } <дел> У этой коробки закругленный угол.

Свойство CSS border-top-left-radius используется при добавлении закругленных углов к границам. Это свойство позволяет вам установить радиус границы в верхнем левом углу.

Свойство border-top-left-radius можно использовать в сочетании со свойством border (или другим свойством, связанным с границей) для установки фактической границы, однако его также можно использовать без явной установки этих границ. характеристики. Например, если вы установили цвет фона для элемента, цвет фона будет закруглен по углам (даже если вы явно не задали свойство границы).

См. border-radius для сокращенного метода установки радиуса границы по всем четырем сторонам одновременно.

Синтаксис

граница-верхний-левый-радиус: <радиус>

Или:

граница-верхний-левый-радиус: <горизонтальный-радиус> <вертикальный-радиус>

Подробнее о допустимых значениях см. ниже.

Возможные значения

Значения/Синтаксис

Возможные значения этого свойства:

[ <длина> | <процент> ]{1,2}

Пояснение значений
<длина>
Указывает радиус с использованием фиксированной длины, например, 10px .
<процент>
Задает радиус в процентах, например, 10% .
Объяснение синтаксиса

Вы можете указать одно или два значения:

  • Если указать только одно значение, оно будет определять радиус как по горизонтали, так и по вертикали.
  • Если указать два значения, первое значение определяет горизонтальный радиус , а второе значение определяет вертикальный радиус .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение
0
Применяется к
Все элементы
Унаследовано?
№
Медиа
Визуальный
Анимируемый
Да (см. пример)

Пример кода

Базовый CSS

граница-верхний-левый-радиус: 8px;

Рабочий пример в документе HTML

Пример <стиль> .круглая граница { ширина: 200 пикселей; отступ: 30 пикселей; граница: 1px сплошной малиновый; граница-верхний-левый-радиус: 35px 20px; } <дел> У этой коробки закругленный угол.

Попробуй

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

  • Свойство border-top-left-radius определено в модуле CSS Backgrounds and Borders Уровень 3 (рекомендация кандидата W3C от 9 сентября 2014 г.)

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства, специфичные для браузера, с помощью таких расширений, как 9. 0005 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.д. CSS свойство, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

свойство

-moz-border-radius-topleft | -webkit-border-top-left-radius свойство CSS (каскадные таблицы стилей)

Вы здесь: Справочник > CSS > свойства > расширения браузера > -moz-border-radius-topleft

Поддержка браузера:

-moz-border-radius-topleft :
-webkit-border-top-left-radius :

Устанавливает закругление левого верхнего угла границы.

Страница JavaScript для этого свойства: MozBorderRadiusTopleft | webkitBorderTopLeftRadius. Вы можете найти другие примеры там.

Возможные значения:

 Одно из следующих значений: 

наследовать Берет значение этого свойства из вычисленного стиля родительского элемента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *