Разное

Border radius круг: Круг | CSS примеры

22.12.2022

Свойство border-radius — скругленные уголки

Свойство border-radius создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию: 0. Является сокращением для свойств border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор { border-radius: значение; }

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

КоличествоОписание
1Для всех углов одновременно.
2 Первое значение задает скругление для верхнего правого и нижнего левого углов, второе — для верхнего левого и нижнего правого.
3 Первое значение задает скругление для верхнего левого угла, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого угла.
4 Первое значение задает скругление для верхнего левого угла, второе — для верхнего правого, третье — для нижнего правого угла, а четвертое — для нижнего левого угла.

Эллиптическое скругление

Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша — вертикальное:

селектор { border-style: горизонтальное / вертикальное; }

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

Пример

Установим скругление 10px для всех углов:

<div></div>#elem { border-radius: 10px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Посмотрим, как выглядит скругления для границы в виде точек:

<div></div>#elem { border-radius: 10px; border: 1px dotted black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для углов одной диагонали, и скругления в 40px — для углов второй диагонали:

<div></div>#elem { border-radius: 10px 40px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для верхнего левого угла, скругление в

30px для нижнего правого угла, и скругления в 50px — для углов второй диагонали:

<div></div>#elem { border-radius: 10px 50px 30px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим различные скругления для каждого из углов:

<div></div>#elem { border-radius: 10px 30px 50px 70px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Давайте сделаем эллиптическое скругление, установив 20px для горизонтальной части скругления, а 40px — для вертикальной:

<div></div>#elem { border: 1px solid black; border-radius: 20px / 40px; width: 300px; height: 100px; }

:

Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

<div></div>

#elem { border: 1px solid black; border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px; width: 300px; height: 100px; }

:

Пример

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

<div></div>#elem { border-radius: 100px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Если поставить скругление, большее чем сторона квадрата, то все равно получится круг:

<div></div>

#elem { border-radius: 200px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Круг можно также получить, если установить border-radius в 50% (преимущество в том, что при изменении размеров квадрата не придется менять скругление):

<div></div>#elem { border: 1px solid black; border-radius: 50%; width: 200px; height: 200px; }

:

Пример

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление.

Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

<div></div>#elem { border-radius: 10%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Установим значение border-radius в 50% для прямоугольника — получится эллипс:

<div></div>#elem { border-radius: 50%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Свойство border-radius скругляет не только уголки не границы, но и фона:

<div></div>#elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }

:

Смотрите также

  • свойство border,
    которое является свойством-сокращением для границы

Что можно делать с помощью CSS Border-Radius? / СоХабр

Как создать очень классные эффекты с помощью этого редко используемого свойства.

TL;DR: Когда вы используете восемь значений, задающих border-radius в CSS, вы можете создавать естественно выглядящие фигуры. Ничего себе. Нет времени читать? Мы сделали для вас наглядный инструмент. Вы найдете его здесь.



Введение

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

Освоение border-radius

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

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

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

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

border-radius: 110px и border-radius: 30% применимо к прямоугольнику.


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

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

Восемь значений, разделенных слешем (вот это представляет интерес)
Я думаю, что большинство из вас делали все то, о чем речь шла ранее. А вот сейчас мы добрались до наиболее захватывающей части. Что произойдет, если вы укажете до восьми значений, разделив их слешем? Давайте посмотрим, что говорит об этом спецификация

W3C

«Если значения заданы до и после слеша, то значения ДО заданы для горизонтального радиуса, а значения ПОСЛЕ для вертикального радиуса. Если слеш отсутствует, то значения задают оба радиуса».

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

Поэтому результаты будут совершенно разные при использовании свойства border-radius: 4em 8em и border-radius: 4em / 8em.


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

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


В итоге получается пересечение четырех эллипсов, образующих конечную фигуру.

Без паники… мы сделали для вас визуальный генератор
Мне потребовалось некоторое время, чтобы привыкнуть к этому синтаксису. Это не произошло интуитивным путем. Чтобы облегчить вам жизнь, мы сделали небольшой инструмент, который поможет вам создать естественную форму.

(НЕ) перекрещивать лучи
Теперь, когда вы имеете представление о 8 значениях, вам станет немного грустно, потому что наш border-radius инструмент не дает возможности установить каждое значение по отдельности. Не сдавайтесь, вот версия 8-POINT-FULL-CONTROL.

Если вы достаточно взрослые, то можете вспомнить цитату из фильма 1984 г. Ghostbusters (Охотники за привидениями):

«Никогда не скрещивайте лучи!» — «Почему?» — «Будет плохо»

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

PS: Огромная благодарность simurai. В далеком 2010 г. он создал CSS3 BonBon Buttons. Хотя они и выглядят немного устаревшими, но это единственное место, где я случайно нашел информацию о слеш-синтаксисе.

Вот это крутое свойство в действии:


Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.

html — Создание круга с использованием радиуса границы

спросил

Изменено 5 лет, 3 месяца назад

Просмотрено 5к раз

Я читаю HTML и CSS Джона Дакетта и познакомился со свойством border-radius .

Я пытаюсь создать круг, используя приведенный ниже код, но круг не идеален. Я использую радиус 50px , но он не идеален.

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

Что я делаю не так?

  • HTML
  • CSS

1

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

У вас есть разные варианты решения этой проблемы:

  1. добавьте box-sizing: border-box к вашему элементу, который определяет, что должно включаться в расчет размера
  2. использовать радиус границы: 50%
  3. добавьте ширину границы и отступы к радиусу границы .

Здесь решение только с box-sizing 

 p {
  отображение: встроенный блок;

  поле: 20 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;

  /* эти значения добавляются к вашим 100px по умолчанию */
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  
  /* теперь ширина и высота определяют размер вашего
     элемент в целом */
  box-sizing: граница-коробка;
}

Более подробное объяснение блочной модели CSS см. в этой статье на MDN.

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

См. ниже.

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр.  три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

0

Это потому, что вы не учли ширину, исходящую от ширины границы, которая составляет 5px на каждом конце. Таким образом, общая ширина составляет 110 пикселей , поэтому радиус границы должен быть 55 пикселей . Более простой способ для идеального круга — просто установить border-radius на 50% .

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

0

Вам просто нужно добавить 50% к свойству border-radius . Ниже приведен фрагмент, и вы обнаружите, что это идеальный круг.

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
}

стр. три {
  отступ: 0px;
  радиус границы: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

1

Еще один вариант — установить для свойства box-sizing вашего элемента значение border-box (как я делаю почти для всех элементов).

 р {
  граница: 5px сплошная #ee3e80;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отображение: встроенный блок;
  поле: 20 пикселей;
  box-sizing: граница-коробка; /* < -------------------- здесь */
}

стр. три {
  отступ: 0px;
  радиус границы: 50 пикселей;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

Border-box учитывает границы при выполнении математических операций и обычно упрощает компоновку и стилизацию при повсеместном применении. Библиотеки вроде Bootstrap делают это за вас.

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Радиус границы — попутный ветер CSS

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

Закругленные углы

Используйте такие утилиты, как . rounded-sm , .rounded или .rounded-lg , чтобы применить различные размеры радиуса границы к элементу.

округлено

округлено-md

округлено-lg

округлено-полное

 

<дел>
<дел>

Кнопки для таблеток

Используйте округлено-полно утилита для создания кнопок-таблеток.

округленный-полный

Без округления

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

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

округление-нет

​Скругление сторон отдельно

Использование rounded-{t|r|b|l}{-size?} для округления только одной стороны элемента.

округленный-t-lg

округленный-r-lg

округленный-b-lg

округленный-l-lg

 

<дел>
<дел>

​Скругление углов по отдельности

Используйте rounded-{tl|tr|br|bl}{-size?} , чтобы скруглить только один угол элемента.

закругленный-tl-lg

закругленный-tr-lg

закругленный-br-lg

округлен-bl-lg

 

<дел>
<дел>

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях, используя модификаторы вариантов. Например, используйте hover:rounded-lg , чтобы применять утилиту rounded-lg только при наведении.

 <дел>

Полный список всех доступных модификаторов состояния см. в документации по Hover, Focus и другим состояниям.

​Точки останова и медиа-запросы

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

 <дел>