Border radius: 🤷🏽‍♀️ Page not found | MDN Web Docs

50% против 100% / Хабр

В последнее время я пытался переосмыслить правила 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 radius CSS для округления углов и создания разных фигур

От автора: когда вы используете восемь значений свойства border radius CSS, определяющих радиус округления углов границы, вы можете создавать естественно выглядящие фигуры. ВОТ ЭТО ДА.

Нет времени, чтобы прочитать все это? Мы создали для вас визуальный инструмент. Он доступен здесь.

Вступление

В рамках конференции Frontend Conference в Цюрихе Рэйчел Эндрю рассказал об Использовании возможностей Grid Layout. В конце своего доклада она упомянула о старом свойстве CSS, и это застряло у меня в голове:

«Изображение можно сделать круглым, используя только хорошо поддерживаемое свойство border-radius. Не забывайте, что старый CSS все еще существует и полезен. Вам не нужно использовать что-то фантастическое для каждого эффекта». — Рэйчел Эндрю

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Освоение border-radius

Одно значение

Начнем с основ. Надеюсь, это вас не утомляет. Вероятно, вы знакомы с CSS, и вы также знаете о border-radius. Свойство существует уже несколько лет, в основном используется с одним значением, таким как: border-radius: 1em, и, возможно, это была одна из самых обсуждаемых / любимых функций CSS3 еще в 2010 году, когда css3please.com был вашим лучшим другом.

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

Как видно из приведенного выше примера, наряду с фиксированными значениями длины, такими как px, rem или em, вы также можете использовать проценты. В основном они используются для создания круга, устанавливая радиус в 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его для прямоугольника, у вас не будет симметричных углов. Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30%, применяемым применяется к прямоугольнику.

Обратите внимание, что углы с правой стороны не симметричны и запомните это. Мы вернемся к этому моменту позже

Четыре разных значения

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

Восемь значений, разделенных косой чертой (вот что интересно)

Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы добираемся до интересной части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Давайте посмотрим, что говорит об этом спецификация:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Таким образом, значения перед косой чертой отвечают за горизонтальные длины, тогда как значения после косой черты определяют вертикальные длины. Но что это значит? Помните процентные значения для прямоугольных фигур? У нас были разные абсолютные значения для вертикальных и горизонтальных длин и асимметрично закругленные углы, и это именно то, что вы получаете, когда используете синтаксис косой черты.

Поэтому, когда вы сравните радиус: 4em 8em с радиусом: 4em / 8em, результаты будут совершенно разные.

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

Честно говоря, фигуры, которые вы получаете с помощью этого, выглядят немного странно. Но вспомните круги, которые вы создаете с помощью border-radius: 50%. Вы получали круг, поскольку оба значения, определяющие одну сторону, составляют 100% (50% + 50% = 100%), и прямой линии нет. Если вы применяете ту же логику к синтаксису радиуса с восемью значениями, вы можете создать фигуру, которая немного похожа на плектр или органическую клектку:

В итоге это четыре перекрывающиеся эллипса, которые формируют окончательную фигуру. Не очень легко!

Не паникуйте … мы создали для вас визуальный генератор

Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Каким-то образом он не интуитивен. Чтобы сделать все немного проще для вас, мы создали небольшой инструмент, который поможет создавать собственные органические фигуры. FANCY BORDER RADIUS

(Не) скрещивайте лучи

Теперь, когда вы знаете о 8 значениях в целом, вы можете почувствовать небольшую грусть, потому что наш инструмент не дает вам возможность устанавливать каждое значение отдельно… Спокойствие, вот 8-точечная версия.

Если вы достаточно взрослые, вы можете помнить эту цитату из фильма 1984 «Охотники за привидениями»: «Не скрещивайте лучи». «Почему?» — «Будет плохо».

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

Смотрите эту замечательную функцию в действии

Автор: Nils Binder

Источник: //9elements.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

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

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

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

Тип свойства

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

Применяется: ко всем элементам, кроме табличных, у которых установлено свойство border-collapse со значением collapse.

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

Значения

Значением свойства border-radius является указание одной или нескольких величин определяющих радиус скругления в каждом углу элемента. Допустимы следующие единицы измерения:

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

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

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

Используя border-radius можно создавать кругоподобные и овальные (эллиптические) скругления. Это зависит от способа указания значений.

Создание кругоподобных скруглений

Указывается от одного до четырех (через пробел) значений радиуса скругления, при этом будут соблюдаться следующие правила:

1. Одно значение — радиус скругления для всех углов одинаковый.
2. Два значения — первое указывает радиус для верхнего левого и нижнего правого углов (по диагонали), а второе — для верхнего правого и нижнего левого.
3. Три значения — первое задает радиус скругления для верхнего левого угла, второе — для верхнего правого и нижнего левого (по диагонали), третье — для нижнего правого угла.
4. Четыре значения — начиная с верхней левого угла и по часовой стрелке: для верхнего левого, верхнего правого, нижнего правого, нижнего левого углов.

Создание овальных скруглений

Значения border-radius разбиваются на две части, между которыми ставится слеш (/). Таким образом их максимальное количество уже может достигать восьми (четыре до слеша и четыре после). Каждая из двух частей подчиняется тем же правилам, что и при создании кругоподобных скруглений, при этом значения перед слешем отвечают за радиус скругления каждого угла по горизонтали (ось X), а после слеша — по вертикали (ось Y).

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

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

Синтаксис

border-radius: [ размеры | проценты ]{1,4} [ / [ размеры | проценты ]{1,4} ]

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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-radius</title>
  <style type="text/css">
   div {
    height: 50px; /* высота блоков DIV */
    background: #66ff66; /* их фон */
    margin-bottom: 5px; /* размер нижнего поля */
   }
   .div1 {
    border-radius: 55px 10px; /* cкругление углов */
   }
   .div2 {
    padding-left:30px; /* внутренний отступ слева */
    border: #000000 3px solid; /* стили рамки */
    border-radius: 3em 1em 4em 6.5em / 2em 3em 2.5em;
   }
  </style>
 </head>
 <body>
  <div>
   DIV1 - border-radius: 55px 10px.
   
  </div>
  <hr>
  <div>
   DIV2 - border-radius: 3em 1em 4em 6.5em / 2em 3em 2.5em.
  </div>
 </body>
</html>

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

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

Версии CSS

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

Браузеры

Браузер:	Internet Explorer		Google Chrome			Mozilla Firefox		Opera		Safari
Версия:	До 9.0	9.0 и выше	До 4.0	От 4.0 до 7.0	7.0 и выше	До 4.0	4.0 и выше	До 10.5	10.5 и выше	До 5.0	5.0 и выше
Поддержка:	Нет	Да	Нет	Частично	Да	Нет	Да	Нет	Да	Нет	Частично

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

CSS3 | Границы

Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

• border-width: устанавливает ширину границы

• border-style: задает стиль линии границы

• border-color: устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

• Значения в единицах измерения, таких как em, px или cm

  border-width: 2px;
  

• Одно из константных значений: thin (тонкая граница — 1px), medium (средняя по ширине — 3px), thick (толстая — 5px)

  border-width: medium;
  

Свойство border-color в качестве значения принимает цвет CSS:

border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

• none: граница отсутствует

• solid: граница в виде обычной линии

• dashed: штриховая линия

• dotted: линия в виде последовательности точек

• double: граница в виде двух параллельных линий

• groove: граница имеет трехмерный эффект

• inset: граница как бы вдавливается во внутрь

• outset: аналогично inset, только граница как бы выступает наружу

• ridge: граница также реализует трехмерный эффект

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

При необходимости мы можем определить цвет, стиль и ширину границы для каждой из сторон используя следующие свойства:

/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border:

border: ширина стиль цвет

Например:

border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top
border-bottom
border-left
border-right

Их использование аналогично:

border-top: 2px solid red;

Радиус границы

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:

border-radius: 15px 30px 5px 40px;

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

border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

border-bottom-left-radius — CSS: Cascading Style Sheets

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

Округление может иметь форму круга или эллипса, или, если одно из значений равно 0 , округление не выполняется, а угол квадратный.

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

Примечание: Если значение этого свойства не установлено в сокращенном свойстве border-radius , которое применяется к элементу после свойства CSS border-bottom-left-radius , тогда значение этого свойства будет сбрасывается в исходное значение сокращенным свойством.

 

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




граница-нижний-левый-радиус: 20%;


граница-нижний-левый-радиус: 20% 20%;


граница-нижний-левый-радиус: 20% 10%;



граница-нижний-левый-радиус: 0.5em 1em;


граница-нижний-левый-радиус: наследование;
граница-нижний-левый-радиус: начальный;
граница-нижний-левый-радиус: вернуться;
граница-нижний-левый-радиус: не задано;
  

С одним значением:

• значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

• первое значение — <длина> или <процент> , обозначающее большую горизонтальную полуось эллипса, используемую для границы в этом углу.
• второе значение — <длина> или <процент> , обозначающее большую вертикальную полуось эллипса, используемую для границы в этом углу.

Значения

<длина-процент>

Обозначает размер радиуса окружности или большой и малой полуосей эллипса. Абсолютная длина может быть выражена в любых единицах, разрешенных типом данных CSS .Проценты по горизонтальной оси относятся к ширине поля, проценты по вертикальной оси относятся к высоте поля. Отрицательные значения недопустимы.

Дуга окружности

Одно значение дает дугу окружности.

  div {
  граница-нижний-левый-радиус: 40 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}
  

Дуга эллипса

Два разных значения образуют дугу эллипса.

  div {
  граница-нижний-левый-радиус: 40 пикселей 20 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}
  

Квадратный элемент с радиусом в процентах

Квадратный элемент с одним значением <процент> образует дугу окружности.

  div {
  граница-нижний-левый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}
  

Неквадратный элемент с процентным радиусом

Неквадратный элемент с одним значением <процент> образует дугу эллипса.

  div {
  граница-нижний-левый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  

Таблицы BCD загружаются только в браузере

HTML DOM Style borderRadius Свойство

❮ Объект стиля

Пример

Добавить закругленные границы к элементу div:

document.getElementById («myDIV»). style.borderRadius = «25px»;

Попробуйте сами »

---

Определение и использование

Свойство borderRadius — это сокращенное свойство для установки или возврата четырех свойств borderRadius.

Четыре свойства радиуса границы (в этом порядке):

границаВверхуЛевойРадиус
границаВверхуПравоРадиус
границаСнизуПраваяРадиус
границаНижний левыйРадиус

Совет: Это свойство позволяет добавлять закругленные углы к элементам!

---

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

Имущество
граница Радиус	Есть	9. 0	Есть	Есть	Есть

---

Синтаксис

Вернуть границу Свойство радиуса:

объект .style.borderRadius

Установить свойство borderRadius:

объект .style.borderRadius = «1-4 длина | % / 1-4 длина | % | начальный | наследование»

Примечание: Четыре значения для каждого радиуса указаны в следующем порядке: вверху слева, вверху справа, внизу справа, внизу слева.Если нижний левый опущен, это то же самое, что в правом верхнем углу. Если нижний правый угол опущен, это то же самое, что и верхний левый. Если вверху справа опускается, это то же самое, что и в верхнем левом углу.

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

.

Значение	Описание
длина	Определяет форму углов. Значение по умолчанию: 0
%	Определяет форму углов в%
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные
наследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Технические характеристики

Значение по умолчанию:	0
Возвращаемое значение:	Строка, представляющая свойство border-radius элемента
Версия CSS	CSS3

---

Связанные страницы

Ссылка CSS: свойство border-radius

---

❮ Объект стиля

Как нарисовать круг с помощью свойства «Радиус границы» CSS

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

Формы повсюду в веб-дизайне. Квадраты и прямоугольники являются наиболее распространенными, поскольку они увеличивают пространство на прямоугольных устройствах, на которых они отображаются (настольные компьютеры, планшеты, мобильные устройства и даже интеллектуальные образцы). Но если вы хотите, чтобы ваш сайт выделялся и привлекал внимание посетителей, вы можете попробовать использовать круги. Вот смехотворно крутой пример круглого дизайна:

Источник изображения

Теперь, когда мы понимаем некоторые преимущества включения кругов в дизайн вашего веб-сайта, давайте рассмотрим, как создать круг, круглый контейнер div и овал с помощью CSS.

Как создать идеальный круг с радиусом границы в CSS

1. Добавьте элемент HTML.
2. Присвойте ему одинаковую ширину и высоту.
3. Установите для свойства CSS border-radius значение 50%.

Шаг 1. Добавьте элемент HTML.

Допустим, вы хотите превратить изображение в идеальный круг. В этом случае вы должны добавить элемент изображения с атрибутом alt и source в HTML.

Вот пример:

Шаг 2: Присвойте ему одинаковую ширину и высоту.

Чтобы сделать элемент идеальным кругом, он должен иметь фиксированную одинаковую ширину и высоту. Поэтому установите одинаковое значение ширины и высоты в CSS.

Шаг 3. Установите для свойства CSS border-radius значение 50%.

Свойство border-radius можно использовать для создания прямоугольников со скругленными краями, эллипсов и других форм, включая идеальный круг. Чтобы создать идеальный круг, задайте значение свойства border-radius равным 50%.

Вот CSS и результат:

См. Перо с многоточием Кристины Перриконе (@hubspot) на CodePen.

Как создать круговой элемент Div с помощью Border-Radius CSS

Чтобы создать круговой div в CSS, выполните те же действия, что и выше. Добавьте div в HTML. Затем установите одинаковое значение для ширины и высоты элемента. Наконец, укажите значение свойства border-radius равным 50%.

Вот пример:

См. Pen How to Create a Circle Div Using Border-Radius CSS Кристины Перриконе (@hubspot) на CodePen.

Обратите внимание, что я сделал div гибким контейнером, чтобы я мог помещать текст в div и центрировать его, используя свойства align-items и justify-content.

Чтобы узнать больше об этом процессе, ознакомьтесь с 11 способами центрирования Div или текста в Div в CSS.

Как создать овал с радиусом границы в CSS

Создание овала почти идентично созданию идеального круга. Вы добавляете HTML-элемент. Но вместо того, чтобы назначать ему одинаковую ширину и высоту, установите их разные. Затем установите для свойства CSS border-radius значение 50%. Получился овал.

Вот пример:

См. Ручка «Как создать овал с радиусом границы в CSS» Кристины Перриконе (@hubspot) на CodePen.

Рисование кругов в CSS

Создание и добавление кругов на сайт или в приложение поможет привлечь внимание посетителей и улучшить дизайн.Лучшая часть? С помощью свойства CSS border-radius легко создавать круги. Вам просто нужно знать основы HTML и CSS, чтобы создать эту уникальную форму.

border-radius · Документы WebPlatform

Сводка

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

Обзорная таблица

Начальное значение

0

Относится к

Все элементы, кроме элемента таблицы, когда border-collapse свернут

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

Как указано в отдельных свойствах

Анимационный

Да

Свойство объектной модели CSS

граница Радиус

В процентах

См. Соответствующий размер (ширину или высоту) рамки.

Синтаксис

• граница-радиус: длина
• border-radius: длина / длина
• border-radius: процент
• border-radius: процент / процент

Значения

длина

Обозначает размер радиуса круга или горизонтального и вертикального радиусов для эллиптических кривых. Он может быть выражен в любых единицах, разрешенных в типах данных CSS .Единицы em полезны для элементов управления, масштабируемых пропорционально размеру шрифта. Относительные единицы области просмотра (vw, vh, vmin, vmax) могут быть полезны для элементов управления, которые масштабируются с размером области просмотра. Отрицательные значения недопустимы. Вы можете указать одну длину для всех четырех углов или две, три или четыре длины, чтобы указать разную длину для разных углов: дополнительные сведения см. В разделе синтаксиса.

процентов

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

длина / длина

Указание двух наборов значений длины, разделенных косой чертой, приравнивается к указанию отдельных длин для радиусов X и Y углов, что приводит к получению эллиптических углов, если радиусы X и Y имеют разную длину.Каждый набор может состоять из одного, двух, трех или четырех значений.

процент / процент

Указание двух наборов процентных значений, разделенных косой чертой, приравнивается к указанию отдельных процентов для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют проценты, приводящие к различным вычисленным значениям (в зависимости от ширины и высота элемента, разные проценты могут привести к одним и тем же вычисленным значениям; подробнее см. в разделе примечаний).Каждый набор может состоять из одного, двух, трех или четырех значений.

Примеры

Пример одного значения

  border-radius: 1em;



граница-верхний-левый-радиус: 1em;
граница-верх-правый-радиус: 1em;
граница-нижний-правый-радиус: 1em;
граница-нижний-левый-радиус: 1em;
  

Посмотреть живой пример

Пример нескольких значений

  border-radius: 20px 1em 1vw / 0.5em 3em;

/* эквивалентно: */

граница-верх-левый-радиус: 20px 0.5em;
граница-верх-правый-радиус: 1em 3em;
граница-нижний-правый-радиус: 1vw 0.5em;
граница-нижний-левый-радиус: 1em 3em;
  

Посмотреть живой пример

Создайте эллипс, если только

  border-radius: 50%;


  

Посмотреть живой пример

Кривые усадки во избежание перекрытия

  border-radius: 100% 150%;



радиус границы: 40% 60%;


  

Посмотреть живой пример

Использование

  Как и в случае любого сокращенного свойства, индивидуальные унаследованные значения невозможны, то есть border-radius: 0 0 inherit inherit, которое частично переопределяет существующие определения.В этом случае необходимо использовать отдельные свойства от руки.
  

Синтаксис

border-radius может принимать от одного до четырех значений:

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

Банкноты

Замечания

• Свойство border-radius является составным свойством, которое определяет до четырех свойств border — * — radius .Если значения указаны до и после косой черты, значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если косой черты нет («/»), значения устанавливают оба радиуса одинаково. Четыре значения для каждого радиуса указаны в порядке по часовой стрелке, начиная с верхнего левого угла. Если указано менее четырех значений, они повторяются до тех пор, пока мы не получим четыре значения, аналогично другим свойствам CSS, таким как border-width.
• Можно получить эллиптические углы, даже указав один радиус.Это происходит, когда вы используете проценты, поскольку они разрешаются для разных чисел для каждой оси (по горизонтали это проценты от ширины рамки, по вертикали от высоты). Для демонстрации см. Пример эллипса выше (пример № 3)
• Поскольку border-radius округляет рамку рамки элемента, внутренние углы (padding box) будут иметь меньшие радиусы (в частности, border-radius — border-width) или даже не закругляться, если граница толще, чем border-radius ценить.Другим следствием этого является то, что при разной ширине границ на смежных сторонах изгибы поля заполнения будут эллиптическими.
• Обратите внимание, что хотя в сокращении border-radius есть косая черта (/) для отделения горизонтальных радиусов от вертикальных, они разделены пробелом в длинных частях.

Связанные спецификации

CSS Backgrounds and Borders Module Уровень 3: Закругленные углы:

Кандидат в рекомендации

Модуль CSS Backgrounds and Borders Уровень 4: Закругленные углы:

Проект редакции

См. Также

Статьи по теме

Граница

Связанные страницы

Атрибуции

highcharts-border-radius — npm

Плагин добавляет параметры для отдельного радиуса границы в столбчатую диаграмму highchart.

 
 const borderRadius = require ("highcharts-border-radius"); 
 
 borderRadius (Highcharts); 
 
 
 
 Highcharts.chart (". Контейнер", {
 
 диаграмма: {type: "column"}, 
 
 title: {text: "Highcharts Border Radius"}, 
 
 xAxis: {
 
 категорий: [ 
 
 «Янв», 
 
 «Фев», 
 
 «Мар», 
 
 «Апр», 
 
 «Май», 
 
 «Июнь», 
 
 «Июл», 
 
 «Август», 
 
 «Сен», 
 
 «Октябрь», 
 
 «Ноябрь», 
 
 «Дек», 
 
], 
 
}, 
 
 yAxis: {
 
 min: 0, 
 
 title: {
 
 text: «Пример», 
 
}, 
 
}, 
 
 plotOptions: {
 
 column: {
 
 borderRadiusTopLeft: 5, 
 
 borderRadiusTopRight: 5, 
 
}, 
 
}, 
 series: [
 
 
 наименование: «Серия 1», 
 
 д ata: [1, 5, 9, 2, 4, 5, 7, 6], 
 
}, 
 
 {
 
 имя: "Серия 2", 
 
 данные: [8, 4, 6, 7, 1 , 5, 4, 8], 
 
}, 
 
 {
 
 имя: "Серия 3", 
 
 данные: [9, 6, 7, 2, 6, 4, 7, 1], 
 
}, 
 
], 
 
}); 
 

 
 const borderRadius = require ("highcharts-border-radius"); 
 
 borderRadius (Highcharts); 
 
 
 
 Highcharts.диаграмма (". контейнер", {
 
 диаграмма: {type: "bar"}, 
 
 title: {text: "Highcharts Border Radius"}, 
 
 xAxis: {
 
 категорий: [
 
 "Jan", 
 
 «Фев», 
 
 «Мар», 
 
 «Апр», 
 
 «Май», 
 
 «Июнь», 
 
 «Июл», 
 
 «Август», 
 
 «Сен», 
 
 «Октябрь», 
 
 «Ноябрь», 
 
 «Декабрь», 
 
], 
 
}, 
 
 yAxis: {
 
 min: 0, 
 
 title: {
 
 text: «Example», 
 
 }, 
 
}, 
 
 plotOptions: {
 
 bar: {
 
 borderRadiusTopLeft: 5, 
 
 borderRadiusTopRight: 5, 
 
}, 
 
}, 
 
 series: [
 
 series: [
 
 series: [
 
 series] 1 ", 
 
 данные: [1, 5, 9, 2, 4, 5, 7, 6], 
 
 }, 
 
 {
 
 имя: "Серия 2", 
 
 данные: [8, 4, 6, 7, 1, 5, 4, 8], 
 
}, 
 
 {
 
 имя: "Серия 3 ", 
 
 данные: [9, 6, 7, 2, 6, 4, 7, 1], 
 
}, 
 
], 
 
}); 
 

Представляем border-radius — Standardista

Дизайнеры годами включают закругленные углы в свои дизайны.В начале 2000-х, когда веб-мастера создавали макет на основе таблиц, они включали крошечные ячейки таблицы, которые можно было добавить в маленькие углы. С окончанием макетов на основе таблиц веб-мастера создали изящные маленькие трюки. От раздвижных дверей до добавления углов с помощью javascript и техники трех фрагментов — мы пробовали и плакали над всем этим с 2004 года. Наши решения включают часы нарезки и нарезки изображений, а также миллионы несемантических html-хуков для этих изображений.

Немного истории

Требовать изображения для декоративных углов — кошмар обслуживания.Дополнительные HTTP-запросы для обслуживания изображений замедляли загрузку страницы и увеличивали пропускную способность сайта. Для закругленных углов требуется либо 4 отдельных изображения — по одному для каждого угла, — либо более крупное изображение-спрайт, включающее все 4 угла, если конструкция позволяет, что требует добавления трех, а иногда и 4 крючков для этих углов.
А для чего? Небольшое украшение.

Больше нет! Хватит беспорядка в разметке, дополнительных HTTP-запросов для декоративных изображений
и JavaScript для презентации. Пришло время позволить браузеру сделать нашу тяжелую работу, тем более что эта «тяжелая работа» действительно очень легка.

Свойство CSS3 border-radius не поддерживается более чем 60% браузеров, просматривающих веб-страницы. Итак, почему вы их не используете? Свойство CSS3 border-radius позволяет создавать собственные закругленные углы, используя только CSS. Дивита нет. Никакого классита. Никаких лишних HTTP-запросов. Не тратьте время зря в Photoshop.

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

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

Итак, как создать эти закругленные углы? Синтаксис закругленных углов немного отличается от эллиптических углов. Вы можете создать 4 одинаковых скругленных угла с одним значением, объявить до четырех разных значений — по одному для каждого скругленного угла или объявить неровные углы, отделив горизонтальный радиус от объявлений вертикального радиуса косой чертой в сокращении или пробелом в длинном рука.

Большинство дизайнов требуют закругленных углов, поэтому давайте сначала начнем с закругленных углов:

Синтаксис (закругленные углы):

Сокращение можно использовать для объявления идентичных (объявление одного значения) или до четырех угловых радиусов разного размера. Или вы можете использовать длинную руку, чтобы объявить каждый угол отдельно:

 border-radius: <все-четыре-одинаковых-углов>;
 

 радиус границы:  ;
 

 радиус границы:   
 ; 

или

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

Код:

Как правило, вам нужно, чтобы все четыре угла имели одинаковый внешний вид, поэтому вам нужно, чтобы все четыре угла были одинаковыми, ЗА ИСКЛЮЧЕНИЕМ случая вкладок верхней панели навигации, где вы хотите, чтобы верхние углы были круглыми, а нижние углы должны быть прямоугольными.

Вы можете использовать сокращение:

.коробка {
    радиус границы: 1em;
    }
.tab {
    радиус границы: 0.5em 0.5em 0 0;
}
 

или от руки:

.коробка {
    граница-верх-правый-радиус: 1em;
    граница-нижний-правый-радиус: 1em;
    граница-нижний-левый-радиус: 1em;
    граница-верхний-левый-радиус: 1em;
    }
.tab {
    граница-верх-правый-радиус: 0.5em;
    граница-нижний-правый-радиус: 0.5em;
}
 

Приведенное выше создаст закругленные углы: вертикальная и горизонтальная стороны каждого угла будут одинаковыми: горизонтальный радиус такой же, как и вертикальный радиус. Но что, если вам нужны углы эллиптической формы? Округлые, но не совсем круглые? Радиус границы позволяет это.

Синтаксис (круглые

ed или эллиптические углы):

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

 border-radius: <значения вертикального радиуса> / <значения горизонтального радиуса>;
 

 граничный радиус:   /  ;
 

 радиус границы:   
  /   
 ; 

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

 граница-верх-правый-радиус:  ;
граница-нижний-правый-радиус: 
 
;
граница-нижний-левый-радиус:  ;
border-top-left-radius:  ; 

Код:

Эти два заявления эквивалентны

.shorthand {
    радиус границы: 2em 1em 4em 3em / 0,5em 3em;
    }

.longhand {
    граница-верх-левый-радиус: 2em 0.5em;
    граница-верх-правый-радиус: 1em 3em;
    граница-нижний-правый-радиус: 4em 0,5em;
    граница-нижний-левый-радиус: 3em;
    } 

А теперь плохие новости

Хотя свойство border-radius широко поддерживается браузерами, в поддержке браузерами есть некоторые несоответствия.

Предыдущие версии Internet Explorer

Border-radius не поддерживается в IE6, IE7 или IE8. Помните, что пользователи получают доступ к вашему веб-сайту с помощью только одного браузера. Они не смотрят на все браузеры: это делают только веб-разработчики.Таким образом, посетители, использующие эти браузеры, не увидят ваши красиво закругленные углы, но они также не будут знать, что им что-то не хватает. Закругленные углы — это улучшение. Как правило, они не критичны к содержанию вашего сайта. Существует файл HTC под названием CSS Curved Corner от Ремиза Рахнаса, который может создавать эффекты закругленных углов для старых версий IE.

Старые браузеры, отличные от IE, которые все еще работают

Если вы все еще поддерживаете Firefox 3.6 и / или Safari 4, вам нужно добавить префиксы -moz- и -webkit- vendor соответственно.Поскольку Safari 5 был выпущен более года назад, а Safari 4 занимает менее 0,75% рынка, я отказался от синтаксиса префикса -webkit-. На момент написания этой статьи, хотя Firefox 4 превзошел Firefox 3.6 на рынке США, эта тенденция не во всем мире, поэтому я все еще включаю углы с префиксом -moz-. Кроме того, более старые версии Firefox использовали нестандартный синтаксис для длинной руки, поэтому при объявлении радиусов границы с префиксом -moz- используйте сокращение. Если вы хотите использовать длинную руку, я рекомендую использовать генератор радиуса границы, чтобы получить FF3.6 и Safari 4 и более ранние версии с длинной рукой.

Причуды в современных браузерах

Opera, IE9, Safari 5, Firefox 4 и Chrome понимают рекомендованный поставщиками стандартный синтаксис для четырех свойств длинной руки и единственного сокращенного свойства border-radius, но в некоторых браузерах есть некоторые ошибки:

Safari 5 не поддерживает процентные значения для закругленных углов. Это разрешено в ночных сборках webkit, поэтому будет решено в Safari 6. Тем временем, поскольку он не понимает%, он проигнорирует все объявление.Хакерство заключается в том, чтобы сначала объявить радиус границы в других единицах длины, а затем объявить вашу процентную версию для всех браузеров, которые понимают процентные значения.

Opera в настоящее время также имеет ошибки с процентными значениями. Он понимает проценты, но в некоторых случаях не отображает их правильно. Значения в эллиптических углах немного отклонены и были исправлены в сборке Opera Next (сборка 1024), поэтому, скорее всего, будут исправлены при следующем запуске. Поэтому в большинстве случаев взлом может не понадобиться.Когда элемент перемещается, радиус границы в Opera полностью отключен. Радиус границы огромен, поэтому элемент выглядит почти прямоугольным, как если бы радиус границы не был установлен. Если вас устраивает постепенная деградация, это не скажется на пользователях Opera: они просто будут видеть почти то же, что видят пользователи IE 7. Если вас это не устраивает, либо не перемещайте округленные элементы, если вы использовали процентные значения в качестве длины радиуса, либо используйте другие типы длины (em, px и т. Д.), Если ваш элемент является плавающим.

Радиус границы CSS | Границы CSS поддерживаются в HTML5

Ниже приведены основные и наиболее распространенные свойства CSS радиуса границы, которые поддерживаются всеми последними версиями браузеров.

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
радиус границы: 50%;
 

-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10 пикселей;
-ms-border-radius: 10 пикселей;
-o-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
 

3.Радиус границы вверху слева

-webkit-border-top-left-radius: 10 пикселей;
-moz-border-radius-top-left: 10 пикселей;
граница-верх-левый-радиус: 10 пикселей;
 

4. Радиус границы вверху справа

-webkit-border-top-right-radius: 10 пикселей;
-moz-border-radius-top-right: 10 пикселей;
граница-верх-правый-радиус: 10 пикселей;
 

5. Радиус границы внизу слева

-webkit-border-нижний левый-радиус: 10 пикселей;
-moz-граница-радиус-нижний левый: 10 пикселей;
граница-нижний-левый-радиус: 10 пикселей;
 

6.Радиус границы внизу справа

-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-right-bottom: 10px;
граница-нижний-правый-радиус: 10 пикселей;
 

-webkit-border-radius: 10 пикселей;
-moz-border-radius: 10 пикселей;
-ms-border-radius: 10 пикселей;
-o-border-radius: 10 пикселей;
радиус границы: 10 пикселей;
ширина: 100 пикселей;
высота: 100 пикселей;
граница: 1px solid # 666;
 

Легко закругляйте углы с помощью CSS3

Свойство border-radius для закругления углов элемента. border-radius: 10px 10px 10px 10px; (первое значение для верхнего левого угла, второе для верхнего правого угла, третье для нижнего правого угла и четвертое значение применяется к нижнему левому углу).

В этом уроке мы узнаем, как border-radius работает с любым элементом.

Используя CSS border-radius, мы можем контролировать каждый угол элемента.

Для изготовления закругленных прямоугольников, капсул или пилюль, эллипсов, кругов.

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

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

Ниже приведен пример того, как создать квадратное изображение или изображение круга с помощью CSS.

Ниже приведен CSS для создания квадратного изображения:

. Квадратное изображение {ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; border-radius: 10px;}

Ниже приведен CSS для создания изображения круга:

.circle-image {ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; border-radius: 50%;}

Вот еще один пример стандартного изображения профиля с закругленными углами, использующего CSS border-radius для превращения прямоугольного изображения в круг.

Во-первых, мы должны создать внешний div, содержащий нормальное прямоугольное изображение, и написать CSS для внешнего div, а также для внутреннего изображения.

.картинка профиля {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  положение: относительное;
  переполнение: скрыто;
  радиус границы: 50%;
  граница: 1px solid # f1ecec;
}
.profile-pic img {
  дисплей: встроенный;
  маржа: 0 авто;
  высота: 100%;
  ширина: авто;
}
 

Вы можете настроить этот код в соответствии с вашими требованиями.