Свойство 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,
    которое является свойством-сокращением для границы

Как сделать круглые изображения? | htmlbook.

ru

Тема:Скруглённые уголки

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+4.0+11.60+5.0+4.0+2.1+2.0+

Задача

Превратить изображения в круг и добавить вокруг них рамку.

Решение

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

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

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

Пример 1. Круглые изображения

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

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

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow. Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    box-shadow: 0 0 0 3px green, 0 0 13px #333; /* Параметры теней */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

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

Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin.

CSS3

  • border-radius
  • box-shadow

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

спросил

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

Просмотрено 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 только к экранам среднего размера и выше.

 <дел>