Закругление 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 возможны благодаря свойству CSS border-radius . При разработке сайта вы можете решить создать кнопку с закругленными углами CSS. Другой пример — использование закругленных углов при добавлении на сайт фотографии владельца бизнеса на паспорт, чтобы изображение выглядело эстетично.

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

Содержание

• Как закруглить углы в CSS
• Настройка отдельных закругленных углов
• Использование сокращенного радиуса границы CSS для создания закругленных углов

Как скруглить углы в CSS

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

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

Установка отдельных скругленных углов

Вы можете использовать четыре подсвойства свойства border-radius для индивидуальной установки радиуса границы каждого угла

• border-top-right-radius
• граница-верхний-левый-радиус
• граница-нижний-правый-радиус
• граница-нижний-левый-радиус

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

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

Затем вы можете скруглить верхний левый угол на 25 пикселей и нижний правый угол на 12 пикселей. Однако сначала вам нужно создать область отображения в HTML и создать закругленные углы в CSS следующим образом:

Использование сокращения CSS Border Radius для создания закругленных углов

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

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

Синтаксис	Пример	Пояснение
Установка одного значения	радиус границы: 25 пикселей;	Значение одинаково изменяет все углы элемента.
Установка двух значений	радиус границы: 25px 12px;	Первое значение изменяет как верхний левый угол, так и нижний правый угол. Второе значение изменяет верхний правый угол и нижний левый угол
Установка трех значений	радиус границы: 50px 30px 25px;	Первое значение изменяет верхний левый угол Второе значение изменяет верхний правый угол и нижний левый угол Третье значение изменяет правый нижний угол
Установка четырех значений	радиус границы: 50px 30px 25px 12px;	Первое значение изменяет верхний левый угол. Второе значение изменяет верхний правый угол. Третье значение изменяет правый нижний угол. Четвертое значение изменяет нижний левый угол.

– Установка одного значения

Указав одно значение, вы примените одно и то же значение радиуса границы ко всем углам элемента. Предположим, в предыдущем примере вы решили создать границу радиусом 25 пикселей по всем углам. Вот как вы можете сделать это в CSS.

В этом примере область отображения составляет 250 пикселей в высоту и 250 пикселей в ширину. Кроме того, дисплей имеет двухпиксельную сплошную оранжевую рамку. Более того, для свойства border-radius установлено значение 25 пикселей, что создает закругленные углы для каждого угла области отображения.

– Установка двух значений

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

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

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

Допустим, вы хотите скруглить верхний левый угол и нижний правый угол области отображения, которую вы создали ранее, на 25 пикселей. Кроме того, вы можете округлить верхний правый и нижний левый углы на 12 пикселей. вот так вы можете сделать это в CSS :

– Установка трех значений

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

Значения применяются в том порядке, в котором вы их установили. Таким образом:

• Первое значение относится к верхнему левому углу элемента
.
• Второе значение применяется как к верхнему правому, так и к нижнему левому углам элемента
• Третье значение относится к правому нижнему углу элемента

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

• Скругление верхнего левого угла на 50 пикселей
• Скругление правого верхнего и левого нижнего углов на 30 пикселей
• Скругление нижнего правого угла на 25 пикселей

Вот как это можно сделать:

– установка четырех значений

Наконец, вы также можете использовать свойство border-radius для создания округлителей с четырьмя различными значениями. Это позволяет вам определяют скругленные углы для элемента, присваивая четыре значения свойству border-radius. Браузер будет интерпретировать значения, которые вы назначаете каждому углу, в следующем порядке:

• Первое значение будет применяться к верхнему левому углу элемента
.
• Второе значение будет применяться к правому верхнему углу элемента
• Третье значение будет применяться к правому нижнему углу элемента
• Четвертое значение будет применяться к левому нижнему углу элемента
.

Теперь предположим, что вы хотите, чтобы область отображения имела различных скругленных угла . Например, вы можете установить значение для верхнего левого угла на 50 пикселей, верхнего правого угла на 30 пикселей, нижнего правого угла на 25 пикселей и нижнего левого угла на 12 пикселей.

Вот как это можно сделать с помощью CSS:

. display { width: 250px; высота: 250 пикселей; граница: 2 пикселя сплошного оранжевого цвета; радиус границы: 50px 30px 25px 12px; }

Создание эллиптических углов

Помимо создания закругленных углов, вы можете использовать свойство border-radius для создания эллиптических границ . Для этого вам нужно разделить два набора значений для углов элемента косой чертой (/) . Синтаксис для определения эллиптических углов:

Допустим, вы хотите определить 50% эллиптический угол для горизонтальных углов и 25% для вертикальных углов области отображения, которую вы создали ранее. Вы можете сделать это, используя следующий код CSS.

У вас получится фигура с эллиптическими закругленными углами.

Более того, вы можете создать круглая кнопка CSS с использованием синтаксиса для создания эллиптических углов. Имейте в виду, что это возможно только , когда объект является квадратом . В этом случае, используя область отображения в качестве примера, вы можете установить равные горизонтальные и вертикальные углы, установив значения 50% следующим образом:

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

Поддержка закругленных углов в разных браузерах различается . Браузеры, которые поддерживают закругленные углы и эллиптические границы для рабочего стола, включают:

• Chrome 4 и выше для закругленных углов
• Край 12
• Firefox 4 и выше
• Internet Explorer 9
• Опера 10. 5
• Safari 5 и выше

Браузеры , поддерживающие эту функцию на смартфонах, включают:

• Chrome Android 18
• Firefox для Android 4
• Опера Android 11
• Сафари на iOS 4.2

Зачем использовать закругленные углы

Идея закругленных углов заключается в том, что их обработка требует меньше когнитивных усилий. Когда вы скругляете углы, вы делаете их более легкими в обработке и более привлекательными . Теория, лежащая в основе того, что люди связывают острые края с опасностью, но более мягкие края вызывают чувство безопасности и дружелюбия.

Известен как смещение контура с люди предпочитают предметы с контурами по сравнению с острыми предметами. Например, знак остановки имеет острые края, которые не являются естественными. На фоне органических и более мягких естественных форм выделяется знак «стоп». Вот почему вы создаете сообщения об ошибках или сообщения, которые должны видеть пользователи, в коробках с острыми краями.

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

Заключение

CSS позволяет создавать закругленные элементы с использованием свойства border-radius . В этом посте вы узнали на примерах способы определения закругленных углов для элементов. Вот краткое изложение всего:

• Свойство border-radius принимает различные значения
• Вы можете использовать подсвойства border-radius для определения закругленных углов
• Применение значений следует определенному порядку
• Установка одного значения для свойства границы изменяет все углы элемента
• Определение двух значений изменяет верхний левый угол и нижний правый угол
• Установка трех значений изменяет все углы, но верхний правый угол и нижний правый угол будут одинаковыми
• Установка четырех значений изменяет каждый угол в зависимости от назначенных значений

Теперь вы готовы начать создавать элементы с закругленными углами в CSS , как профессионал.

• Автор
• Последние сообщения

Должность решает все

Должность решает все: ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.

Последние сообщения Position is Everything (посмотреть все)

Идеальные закругленные углы с помощью CSS

Отличный способ улучшить внешний вид различных блочных элементов — использовать эффект «закругленных углов». Например, в текущем дизайне этого сайта я использую закругленные углы для нескольких различных типов элементов, включая границы изображений, панели контента и даже предварительно отформатированные блоки кода. Некоторые из этих эффектов закругленных углов достигаются с помощью нескольких

  элементов, например, — отличный способ постепенно улучшить визуальное представление дизайна (вообще говоря). 
 
 Хорошей новостью об использовании CSS для создания эффектов закругленных границ является то, что этот эффект можно применять во многих различных браузерах. Конечно, Internet Explorer не может с этим справиться, но в этом и заключается основная идея прогрессивного улучшения, верно? Браузеры, которые «получают это», пользуются преимуществами, в то время как те, которые не продолжают нормально функционировать без улучшений. Итак, для тех из вас, кто ищет полную коллекцию фрагментов кода для быстрого копирования и вставки для простых закругленных углов с помощью CSS, вот вам: 
 
 CSS Закругленные углы для всех четырех углов 
 
 Этот CSS-рецепт закругления углов применяет эффект закругления угла радиусом 10 пикселей ко всем четырем углам любого блочного элемента: 
 
 /* 4 закругленных угла */
. все четыре закругленных угла {
-webkit-border-radius: 10px;
-khtml-граница-радиус: 10px;
-moz-border-radius: 10px;
радиус границы: 10px;
} 
 CSS Закругленные углы для верхнего левого угла 
 Этот CSS-рецепт закругления углов применяет эффект закругления угла радиусом 10 пикселей к верхнему левому углу любого поддерживающего блочного элемента:
 /* верхний левый закругленный угол */
.верхний левый закругленный угол {
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
граница-верхний-левый-радиус: 10px;
} 
 CSS Закругленные углы для верхнего правого угла 
 Этот CSS-рецепт закругления углов применяет эффект закругления угла радиусом 10 пикселей к правому верхнему углу любого поддерживающего блочного элемента:
 /* верхний правый закругленный угол */
.верхний правый закругленный угол {
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
граница-верхний-правый-радиус: 10px;
} 
 CSS Закругленные углы для нижнего левого угла 
 Этот CSS-рецепт закругления углов применяет эффект закругления угла радиусом 10 пикселей к нижнему левому углу любого поддерживающего блочного элемента:
 /* нижний левый закругленный угол * /
. нижний левый закругленный угол {
-webkit-border-bottom-left-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
радиус нижнего левого края: 10 пикселей;
} 
 CSS Закругленные углы нижнего правого угла 
 Этот CSS-рецепт закругления углов применяет эффект закругления угла радиусом 10 пикселей к правому нижнему углу любого вспомогательного элемента блочного уровня:
 /* нижний правый закругленный угол */
.нижний правый закругленный угол {
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
граница-нижний-правый-радиус: 10px;
} 
 The Full Meal Deal — Несимметричные закругленные углы CSS 
 Этот рецепт CSS применяет несимметричные закругленные углы ко всем четырем углам любого поддерживающего элемента блочного уровня. Этот метод в основном записывает различные правила границ по отдельности, тем самым позволяя различать значения для каждого радиуса закругленного угла. Смущенный? Не будь; просто проверьте следующий код, и все станет совершенно ясно:
 /* взорванные закругленные углы */
.exploded-закругленные-углы {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
граница-нижний-правый-радиус: 10px;
радиус нижнего левого края: 10 пикселей;
граница-верхний-правый-радиус: 10px;
граница-верхний-левый-радиус: 10px;
} 
 Обойди их! 
 Дайте мне знать, если я что-то пропустил. Я хочу предоставить простой, полный и точный справочник по копированию и вставке для создания закругленных углов с помощью CSS. Поэтому, если вы знаете какие-либо связанные приемы или приемы, поделитесь ими в разделе комментариев.