Css радиус: CSS border-radius property – border-radius — Web technology for developers

CSS свойство border-radius

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

Свойство border-radius является универсальным свойством, которое позволяет за одну декларацию определить свойства border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

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

Тем не менее, при необходимости можно устанавливать радиус для каждого угла отдельно. При этом соблюдаются следующие правила:

  • 4 значения: первое значение - верхний левый угол, второе - верхний правый угол, третье - нижний правый угол и четвертое значение - нижний левый угол
  • 3 значения: первое значение - верхний левый угол, второе значение - верхний правый и нижний левый углы и третье значение - нижный правый угол
  • 2 значения: первое значение - верхний левый и нижний правый углы, второе значение - верхний правый и нижний левый углы
  • 1 значение: у всех четырех углов одинаковый радиус скругления

CSS синтаксис

border-radius: радиус|% [ / радиус|%] | initial | inherit;

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

Значение Описание
радиус Устанавливает радиус скругления в допустимых в CSS значениях (px, cm, in, em и др.). Значение по умолчанию 0.
% Устанавливает радиус скругления в процентах от ширины блока.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки).

Например,


div {
   border-radius: 2em 1em 4em / 0.5em 3em;
}

то же самое, что


div {
   border-top-left-radius: 2em 0.5em;
   border-top-right-radius: 1em 3em;
   border-bottom-right-radius: 4em 0.5em;
   border-bottom-left-radius: 1em 3em;
}

Пример

У элементов <div> делаем углы рамки скругленными


div {
     border: 2px solid;
     border-radius: 25px;
}

50% против 100% / Sandbox / Habr

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

Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?

Некоторые детали реализации браузера нечеткие, наверное потому что я в действительности не читал спецификацию. Теперь все чаще я пытаюсь себя спрашивать — почему все работает именно так? И все это привело меня к моментам озарения, которыми я надеюсь поделиться с вами.

Идеальные круги в CSS


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


CSS круги на Rdio, Dribbble, и Codecademy

Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом — создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.

Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius, процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.


Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)

Как же действительно работает border-radius?


Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?

В презентации Lea Verou, The Humble Border Radius, указывает на W3C правило о пересекающихся изгибах:
если суммарное значение радиуса границы для двух смежных углов превышает размер элемента, то браузер выполняет дополнительные вычисления для

пропорционального масштабирования радиуса границы каждого угла до тех пор, пока они не пересекутся.

Если верхний левый угол границы квадрата равен 100%, тогда радиус простирается от нижнего левого угла до верхнего правого угла квадрата. Это тоже самое, что и установка радиуса границы в 150px, то есть размер квадрата. И если верхний правый радиус границы также равен 100%, то суммарное значение двух углов составит 200%. И тогда браузер говорит: «Это недопустимо — установите значение для правого угла!» и масштабирует оба радиуса до тех пор, пока они не войдут в квадрат. В этот момент каждый угол становится равным половине от 100%.


Как браузер уменьшает border-radius 100% при масштабировании CodePen

Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.

Вывод


Если установить радиус границы в 100% для всех углов элемента, браузер за кулисами выполнит дополнительную работу, чтобы масштабировать углы до тех пор, пока они не сойдутся. Я не уверен, есть ли какие-то последствия в плане производительности при установке border-radius в 100% для всех ваших кругов.

По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.

А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…

Свойство border-top-right-radius | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-top-right-radius определяет форму границы верхнего правого угла.

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip.

  1. Скругление верхнего правого угла отсутствует. Значение по умолчанию 0 (ноль).
  2. Скругление верхнего правого угла (по типу дуги окружности). Значение указывается в единицах измерения CSS (px, em, cm и т.д.) и определяет
    r
    adius (радиус) скругления. Допускается указывать значения в процентах. Отрицательные значения недопустимы.
  3. Скругление верхнего правого угла (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em, cm и т.д.), первое значение определяет horisontal (горизонтальный) радиус скругления, а второе vertical (вертикальный). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

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

CSS синтаксис:

border-top-right-radius:"length | % | length или % length или % | initial | inherit";

JavaScript синтаксис:

object.style.borderTopRightRadius = "5px"

Значения свойства

ЗначениеОписание
lengthОпределяет форму верхнего правого угла. Значение по умолчанию 0 (ноль). Отрицательные значения недопустимы.
%Определяет форму верхнего правого угла в процентах. Отрицательные значения недопустимы.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Установка формы границы верхнего правого угла элемента в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid red; /* устанавливаем сплошную границу размером 3px красного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
}
.test   {border-top-right-radius : 50px;}  /* скругление верхнего правого угла (по типу дуги окружности) */
.test2 {border-top-right-radius : 50px 25px;}  /* скругление верхнего правого угла (по типу дуги эллипса) */
.test3 {border-top-right-radius : 50px 100px;}  /* скругление верхнего правого угла (по типу дуги эллипса) */
.test4 {border-top-right-radius : 30% 30%;}  /* скругление верхнего правого угла (по типу дуги окружности) */
.test5
{border-top-right-radius : 90% 100px;;} /* скругление верхнего правого угла (по типу дуги эллипса) */ </style> </head> <body> <div class = "test">50px</div> <div class = "test2">50px 25px</div> <div class = "test3">50px 100px</div><br> <div class = "test4">30% 30%</div> <div class = "test5">90% 100px</div> </body> </html>
Установка формы границы верхнего правого угла элемента в CSS (свойство border-top-right-radius).CSS свойства

border-top-left-radius | CSS | WebReference

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

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

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

Синтаксис ?

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

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

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

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!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>Буквица</div>
   <div>
    Буквица является художественным приемом оформления текста и 
    представляет собой увеличенную первую букву, базовая линия 
    которой ниже на одну или несколько строк базовой линии 
    основного текста. 
   </div>
 </body> 
</html>

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

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

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

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

Объект.style.borderTopLeftRadius

Примечание

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

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

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

 
Базовый синтаксис9121410.53514
Проценты912410.554
Эллиптические уголки912110.533.5
 
Базовый синтаксис12.11410.535
Проценты2.1410.55
Эллиптические уголки2.13.510.53

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

border-top-right-radius | htmlbook.ru

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-right-radius

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

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

Значения

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

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

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

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-right-radius</title>
  <style>
   .radius {
    background: #f0f0f0;
    border: 1px dashed #000;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head> 
 <body> 
  <div>
   border-top-right-radius: 10px
  </div>
  <div>
   border-top-right-radius: 70px 40px
  </div>
 </body> 
</html>

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

Рис. 2. Радиус скругления в браузере Safari

Браузеры

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

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

border-top-left-radius | htmlbook.ru

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: [значение | проценты] [значение | проценты]

Значения

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

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

Рис. 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>Буквица</div>
   <div>
    Буквица является художественным приемом оформления текста и 
    представляет собой увеличенную первую букву, базовая линия 
    которой ниже на одну или несколько строк базовой линии 
    основного текста. 
   </div>
 </body> 
</html>

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

Рис. 2. Радиус скругления в браузере Safari

Браузеры

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

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

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

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