Закругление углов css: Скругление углов в CSS

Скругление углов в CSS

Главная > Учебник CSS >

Установка скругления

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius. В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

Стиль:

+

#div1
  {
  border: 1px solid Red;
  padding: 20px;
  border-radius: 10px;
  }

HTML код:

<div>Блок со скруглёнными углами</div>

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

Стиль:

#rightrad
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 20px;
  }

HTML код:

<div>Блок с отдельными скруглёнными углами</div>

Краткая запись

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

• Сначала идёт верхний левый угол
• затем верхний правый
• затем нижний правый
• затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

Стиль:

#allradius 
  {
  border-radius: 10px 5px 12px 21px;
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  }

HTML код:

<div>Скругление всех углов по отдельности</div>

Скругление в виде эллипса

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

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

Стиль:

#elradius
  {
  width: 300px;
  height: 50px;
  background-color: #CCC;
  border-radius: 80px/20px;
  }

HTML код:

<div></div>

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

Стиль:

#elk
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-bottom-left-radius: 50px 15px;
  }

HTML код:

<div>Скругление в виде эллипса</div>

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

Пример:

Стиль:

#pr
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px; 
  border-bottom-left-radius: 35%;
  }

HTML код:

<div>Скругление в процентах</div>

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
2. Задать фон блока.
3. Установить скругление всех углов 50 процентов.

Радиус границы — Tailwind CSS

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

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

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

rounded

rounded-md

rounded-lg

rounded-full

<div></div>
<div></div>
<div></div>
<div></div>

​Кнопки-таблетки

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

rounded-full

<button>Сохранить изменения</button>

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

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

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

rounded-none

<button>Сохранить изменения</button>

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

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

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

<div></div>
<div></div>
<div></div>
<div></div>

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

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

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

<div></div>
<div></div>
<div></div>
<div></div>

​Применяя условно

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:rounded-lg to only apply the rounded-lg utility on hover.

<div>
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use

<div>
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​Использование пользовательских значений

​Настройка вашей темы

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

tailwind.config.js

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      DEFAULT: '0.25rem',
      DEFAULT: '4px',
      'md': '0.375rem',
      'lg': '0.5rem',
      'full': '9999px',
      'large': '12px',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

If you need to use a one-off border-radius value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div>
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

CSS Закругленные границы

❮ Предыдущая Следующая ❯

CSS округлые границы

Собственность Border-Radius используется для добавления округлых границ к элементу:

Нормальная граница

Круглая граница

Руковая граница

Кружная граница

Пример

P {
  граница: 2 пикселя, сплошная красная;
  граница-радиус: 5px;
}

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

Дополнительные примеры

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

Установка стиля нижней границы
В этом примере показано, как задать стиль нижней границы.

Установка ширины левой границы
В этом примере показано, как установить ширину левой границы.

Установка цвета четырех границ

Установка цвета правой границы
В этом примере показано, как установить цвет правой границы.

Проверьте себя с помощью упражнений

Упражнение:

Используйте сокращенное свойство border, чтобы установить «4px», «пунктирную», «красную» границу для элементов

.

<стиль>
п {
  : ;
}

<тело>
   
Это заголовок
 
  
Это абзац
  
Это абзац

 

Начать упражнение

Все свойства границ CSS

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

лучших примеров

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

CSS3 Радиус границы (закругленные углы) | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

?

CSS3 Радиус границы (закругленные углы)

• Глобальное использование

  98,16% + 0% «=» 98,16%

Способ закругления краевых углов. Охватывает поддержку сокращенного border-radius , а также расширенных свойств (например, border-top-left-radius ) Поддерживается

Edge

1. 12–110: Поддерживается
2. 00% — Supported»> 111: Поддерживается

Safari

1. 3.1 — 4: Supported
2. 5: Supported
3. 5.1 — 6.1: Supported
4. 7 — 16.3: Supported
5. 16.4: Supported
6. 16.5 — TP: Supported

Firefox

1. 2: Partial support
2. 3 — 3,6: поддержано
3. 4 — 49: Поддержано
4. 50 — 110: Поддерживается
5. 111: Поддерживается
6. 00% — Supported»> 112 — 113: Поддержано

Opera

Opera

1. 7777777777777777777: 9027: 9027:

IE

1. 5.5 — 8: Not supported
2. 9 — 10: Supported
3. 11: Supported

Chrome for Android

1. 111: Supported

Safari on iOS

1. 3.2: Supported
2. 4 — 16.3: Supported
3. 16. 4: Supported
4. 16.5: Supported

Samsung Internet

1. 4 — 19.0: Supported
2. 20: Supported

Opera Mini

1. all: Not supported

Opera Mobile

1. 10: Not supported
2. 11 — 12.1: Supported
3. 73: Supported

UC Browser for Android

1. 13.4: Supported

Браузер Android

1. 2.1: Поддерживается
2. 2.2 — 4.4.4: Поддерживается