border-radius в CSS


Содержание

border-radius

Свойство 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).

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

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

Синтаксис

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

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

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

Пример

Добавьте скругленные границы в два элемента

#example1 <
border: 2px solid red;
border-radius: 25px;
>

#example2 <
border: 2px solid red;
border-radius: 50px 20px;
>

Подробнее примеры ниже.

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

Свойство border-radius определяет радиус углов элемента.

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

Это свойство может иметь от одного до четырех значений. Вот правила:

Четыре значения-граница-радиус: 15пкс 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, и четвертое значение применяется к нижнему левому углу):

Три значения-граница-радиус: 15пкс 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему и нижнему левому углам, а третье значение применяется к нижнему правому углу):

Два значения-граница-радиус: 15пкс 50px; (первое значение применяется к верхнему левому и нижнему углам, а второе значение применяется к верхнему и нижнему левому углам):

Одно значение-граница-радиус: 15пкс; (значение применяется ко всем четырем углам, которые округляются одинаково:

Значение по умолчанию:
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.borderRadius=»25px»

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

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

Синтаксис CSS

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

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

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

Другие примеры

Пример

Задать скругленные углы для элемента с цветом фона:

Пример

Задать скругленные углы для элемента с границей:

Пример

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

Пример

Также обратите внимание на это:

#example1 <
border-radius: 2em / 5em;
>
/*is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em;*/

#example2 <
border-radius: 2em 1em 4em / 0.5em 3em;
>
/*is equivalent to:
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;*/

Border-radius CSS может это сделать?

Дата публикации: 2020-10-31

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

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

Вступление

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Вскоре после того, как я услышал это, я подумал, что мы, конечно, могли бы создать больше, чем просто круги, и начал копаться глубже в том, что можно сделать, используя 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

Илон Маск рекомендует:  Phar в PHP преимущества и работа с PHAR

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Nils Binder

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

CSS border-radius Property

The border-radius property is used to make rounded corners for the outer border edge of an element.

The border-radius property is one of the CSS3 properties.

This property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties which are used for setting the four corners of an element separately. But the border-radius property can be used to define all the four corners at the same time. It can have from one to four values.

If all four values are set, they represent the top-left, top-right, bottom-right and bottom-left borders respectively. If bottom-left is missed, it is the same as top-right, if bottom-right is omitted, it is the same as top-left, and if only one value is defined, it is used for all four corners equally.

The border-radius property is specified as:

  1. one, two, three, or four length or percentage values. This is used to set a single radius for the corners.
  1. followed optionally by a slash ( / ) and one, two, three, or four length or percentage values. This is used to set an additional radius, so you can have elliptical corners.

The first set of (1-4) values define the horizontal radius for all four corners. An optional second set of values, preceded by a slash, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.

Initial Value
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. Each of the properties of the shorthand are animatable.
Version CSS3
DOM Syntax object.style.borderRadius = «20px»;

Syntax

Example

For the best possible browser support, you should prefix with -moz- for Firefox, and -webkit- for Safari, Chrome, and other browsers.

Current Firefox versions support border-radius property without the -moz- prefix.

See an example with -moz- and -webkit- prefixes, where two different values are defined for the border-radius property: with percent and pixel.

Example

You can also set the border-radius for an element with background color or background image.

Example

Now let’s see an example full of various boxes with different border-radius values which form the shape of the boxes.

CSS border-radius Property

Example

Add rounded corners to two

#example1 <
border: 2px solid red;
border-radius: 25px;
>

#example2 <
border: 2px solid red;
border-radius: 50px 20px;
>

More «Try it Yourself» examples below.

Definition and Usage

The border-radius property defines the radius of the element’s corners.

Tip: This property allows you to add rounded corners to elements!

This property can have from one to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values — border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value — border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Default value:
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.borderRadius=»25px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS Syntax

Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Property Values

Value Description Play it
length Defines the shape of the corners. Default value is 0. Read about length units Play it »
% Defines the shape of the corners in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set rounded corners for an element with a background color:

Example

Set rounded corners for an element with a border:

Example

Set rounded corners for an element with a background image:

Example

Also notice this:

#example1 <
border-radius: 2em / 5em;
>
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */

#example2 <
border-radius: 2em 1em 4em / 0.5em 3em;
>
/* is equivalent to:
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; */

CSS: интересные возможности border-radius

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

Предлагаем поговорить о тонкостях использования border-radius .

Старые свойства и современный веб-дизайн

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


Через некоторое время после этого выступления мне в голову пришла мысль о том, что круг — это лишь малая часть того, что можно сделать с помощью border-radius . Увлечённый этой идеей, я решил как следует разобраться с этим свойством.

Освоение border-radius

Единственное значение

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

При использовании единственного значения для border-radius углы элемента скругляются в соответствии с этим значением.

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

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

Четыре отдельных значения

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

Илон Маск рекомендует:  Iis регулирование процессов

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

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

Итак, значения до косой черты ответственны за горизонтальные расстояния, а значения после косой черты — за вертикальные. Всё это хорошо, но тут возникает закономерный вопрос: «А о чём вообще идёт речь?». Помните процентные значения скругления углов, задаваемые для прямоугольных фигур? Там были применены разные абсолютные значения для вертикальных и горизонтальных расстояний и присутствовали асимметрично скруглённые углы. Именно такого эффекта можно добиться, используя косую черту при настройке border-radius .

Давайте сравним эффекты, которые дают следующие настройки: border-radius: 4em 8em и border-radius: 4em / 8em . Результаты получатся очень разными.

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

Свойство border-radius

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

Допустимые значения

  • — точное значение радиуса (не может быть отрицательным)
  • — значение радиуса в процентах.

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

Можно задать эллиптические радиусы используя слеш. Значения до слеша — радиусы по оси х, а после слеша — радиусы по оси у.

эллиптические радиусы

Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.

Значение по умолчанию
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 5 и выше

Пример

Твой код:
Результат:

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3-5 и Chrome 1-5 поддерживают аналогичное свойство -webkit-border-radius, а Firefox 1.0-4.0 -moz-border-radius, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше. Также в свойстве -webkit-border-radius отсутствует возможность указать разные значения радиуса для разных углов. Для этого приходится для каждого угла указывать радиус отдельно.

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

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

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

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

Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Идем далее основ

Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов :before и :after. С помощью которых можно добавить дополнительные рамки к элементу:

На вид не очень элегантно, но по крайней мере, это работает. Немного проблемно разобраться с последовательность цветов в рамках… но понять можно.

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

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

Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:


Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.

Отлично получилось! Но это противоречит семантической верстке, создавать .arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

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

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

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

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы – даже сердечки и знак биологической опасности.

Илон Маск рекомендует:  Что такое код c#

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

border-radius

Свойство 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).

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

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

Синтаксис

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

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

Закруглённые углы (свойство border-radius) | CSS

Генератор border-radius CSS

Как сделать закругленные углы CSS

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

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

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1 2 3
1.1 2.1 3.1
1.2 2.2 3.2

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

CSS скругление углов у border-image

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

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

HTML круг

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

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? :) NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник :) NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

CSS: /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL