Закругление углов 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 процентов.

Свойство border-radius | Справочник HTML CSS

• поддерживается начиная с
• частичная поддержка до
• не поддерживается

Значения

border-radius: 0;

Убирает скругление углов элемента

border-radius: 10px;

Скругление углов для всех сторон элемента, используя один параметр. Возможные единицы: px, em, rem, %, vw, vh

<style>
.example-1 {
    width: 150px;
    height: 150px;
    background: #ff9031;
    border-radius: 10px;
}
</style>

<div></div>

border-radius: 90px 20px;

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

<style>
.example-2 {
    width: 150px;
    height: 150px;
    background: #d8d457;
    border-radius: 90px 20px;
}
</style>

<div></div>

border-radius: 20px 30px 145px;

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

<style>
.example-3 {
    width: 150px;
    height: 150px;
    background: #f12d63;
    border-radius: 20px 30px 145px;
}
</style>

<div></div>

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

<style>
. example-4 {
    width: 150px;
    height: 150px;
    background: #ff9031;
    border-radius: 15px 30px 45px 10px;
}
</style>

<div></div>

border-radius: 41% 60% 30% 59% / 40% 40% 53% 40%;

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

Первый параметр первой группы — верхняя граница левого верхнего угла, первый параметр второй группы — левая граница левого верхнего угла

Второй параметр первой группы — верхняя граница правого верхнего угла, второй параметр второй группы — правая граница правого верхнего угла

Третий параметр первой группы — нижняя граница правого нижнего угла, третий параметр второй группы — правая граница правого нижнего угла

Четвертый параметр первой группы — нижняя граница левого нижнего угла, четвертый параметр второй группы — левая граница левого нижнего угла

<style>
. example-5 {
    width: 150px;
    height: 150px;
    background: #fa5144;
    border-radius: 41% 60% 30% 59% / 40% 40% 53% 40%;
}
</style>

<div></div>

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

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

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

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

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

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

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

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

Пример

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

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

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

Все основные свойства границ в одном объявлении

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

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

Установка цвета четырех границ
В этом примере показано, как установить цвет четырех границ. Может иметь от одного до четырех цветов.

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

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

Упражнение:

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

.

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

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

 

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

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

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

ВЫБОР ЦВЕТА

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

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

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

FORUM | О

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

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

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

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

?

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

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

  98,85% + 0% знак равно 98,85%

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

Edge

1. 12–106: Поддерживается
2. 25% — Supported»> 107: Поддерживается

Safari

1. 3.1 — 4: Supported
2. 5: Supported
3. 5.1 — 6.1: Supported
4. 7 — 16.0: Supported
5. 16.1: Supported
6. 16.2 — TP: Supported

Firefox

1. 2: Partial support
2. 3 — 3,6: поддержано
3. 4 — 49: Поддержано
4. 50 — 106: Поддержано
5. 107: Поддержано
6. 00% — Supported»> 108 — 109: Поддержано

Opera

Opera

1. 7

. Поддерживается

IE

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

Chrome for Android

1. 107: Supported

Safari on iOS

1. 3.2: Supported
2. 4 — 16.0: Supported
3. 16.1: Supported

Samsung Internet

1. 84% — Supported»> 4 — 18.0: Supported
2. 19.0: Supported

Opera Mini

1. all: Not supported

Opera Mobile

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

UC Browser for Android

1. 13.4: Supported

Android Browser

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

Firefox для Android

1. 106: Поддержал

QQ Browsher

QQ Browsher

QQ Browsher

QQ Browsher

.