Round corner css: border-radius — CSS | MDN

Leave a Comment / Css / By /

Содержание

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

  • Главная
  • Фрагменты кода

css buttoncss button rounded angleshtml button

В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на пример этого.

Предположим, у вас есть следующая разметка.

 <дел>

Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим красный цвет фона.

 .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}

Ниже приведен результат вышеописанного.

Чтобы сделать границы блока закругленными, вы можете добавить следующий стиль:

 радиус границы: 15 пикселей;

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

Ниже вы можете увидеть результат вышеуказанной разметки.

Свойство border-radius можно записать несколькими способами.

При указании одного значения свойства все четыре края элемента будут иметь радиус этого значения.

 радиус границы: 15px 15px;

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

 радиус границы: 15px 15px 15px;

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

 радиус границы: 15px 15px 15px 15px;

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

 граница-верхний-левый-радиус: 15px;
граница-верхний-правый-радиус: 15px;
граница-нижний-правый-радиус: 15px;
граница-нижний-левый-радиус: 15px;

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

 радиус границы: 5px 25px;

Добавление закругленных углов к кнопкам

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

 
 
 кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20px;
}

Кнопка будет выглядеть так:

Вот еще несколько примеров полных кнопок

Категории

  • Действие формы
  • Контактные формы
  • Фрагменты кода
  • HTML-формы
  • Передовой опыт
  • HTML5-формы
  • Виджеты форм
  • PHP-обработка Form4 j0 90 90 004
  • Электронные формы
  • Почтовые формы
  • Веб-формы
  • Формы расчета
  • Флажки
  • Загрузка файла
  • Формы Google

Как сделать закругленный угол с помощью CSS?

Обзор

Цель CSS — сделать HTML-документы эстетически привлекательными. При разработке веб-страницы могут быть случаи, когда мы хотим, чтобы некоторые элементы или изображения имели закругленные углы. Здесь в игру вступает свойство CSS border-radius.

  • Мы можем использовать свойство border-radius , чтобы добавить закругленные углы CSS к любому элементу.
  • Мы часто называем закругленные границы «удобными прямоугольниками», потому что они подразумевают комфорт, безопасность и надежность, которые улучшают взаимодействие с пользователем.
  • Чтобы добавить закругленные углы CSS к элементу, изображению или границе, мы можем использовать свойство border-radius и указать значение радиуса в пикселях, процентах или em.
  • Свойство border-radius может иметь от одного до четырех значений.
  • Мы можем независимо указать border-radius для каждого угла, используя составные свойства, такие как border-top-left radius , border-bottom-right radius и т. д.
  • Мы также можем использовать свойство border-radius для создания эллиптических границ.

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

Предварительные условия

Прежде чем продолжить, убедитесь, что вы понимаете основные принципы пограничной собственности.

Синтаксис 

 
 border-radius:<значение радиуса>

Свойство CSS border-radius — это сокращенное свойство, которое равномерно скругляет все углы элемента. Мы можем указать радиус границы в пикселях или процентах.

Возможные значения для закругленных углов

Значение Описание Пример
длина Мы можем использовать значения длины для обозначения радиуса. радиус границы : 10px ;
проценты Мы можем использовать процентные значения для указания радиуса. радиус границы: 5% ;

Отрицательные значения недопустимы.

Standard

Для различных браузеров, включая Chrome и Firefox, мы можем определить закругленные углы CSS, используя свойство border-radius , добавив к свойству префикс -webkit и -moz. «-webKit» и «-moz» — это префиксы поставщиков в CSS, предлагаемые механизмами рендеринга Chrome и Firefox соответственно. Эти префиксы позволяют нам использовать функции CSS без внесения несоответствий.

Стандартный Эквивалент Mozilla Эквивалент Webkit
радиус границы: 10 пикселей; -moz-border-radius: 10px; -webkit-border-radius: 10px;

Нам нужна только стандартизированная версия, так как все браузеры поддерживают официальный синтаксис CSS. Это не обязательно, но мы можем добавить к свойству префикс «-webKit» и «-moz», чтобы обеспечить полную поддержку устаревшего браузера.

Отдельные углы

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

top-left
Составляющая собственность Эквивалент Mozilla Эквивалент Webkit Описание Пример
6 168 -moz-border-radius-topleft -webkit-граница -top-left-radius Скругляет верхний левый угол элемента. граница-верхний-левый-радиус : 10px ;
граница-верхний-правый-радиус-moz-граница-радиус-верхний правый -webkit-border-top-right-radius Скругляет правый верхний угол элемента. граница-верхний-правый-радиус : 10px ;
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius Скругляет нижний левый угол элемента. граница-нижний-правый-радиус: 10px;
граница-нижняя-левая-радиус-moz-граница-радиус-нижняя левая-webkit-граница-нижняя-левая-радиус Скругляет правый нижний угол элемента. граница-нижний-левый-радиус: 10px;

Сокращенное свойство

  • Мы можем указать одиночное значение , если хотим равномерно скруглить углы.
 
 радиус границы: 10 пикселей;
  • Мы можем указать два значения . Первое значение задает верхний левый и нижний правый углы, а другое применяется к верхнему правому и нижнему левому углам.
 
 радиус границы: 10px 15px ;
/*граница-радиус: верхний левый и нижний правый верхний правый и нижний левый */
  • Мы можем указать три значения . Первое значение применяется к верхнему левому углу, второе значение — к верхнему правому и нижнему левому углам, а третье значение — к нижнему правому углу.
 
 радиус границы: 5px 10px 15px ;
/*граница-радиус: верхний левый верхний правый и нижний левый нижний правый */
  • Мы можем даже указать четыре значения . Первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу.
 
 радиус границы: 5px 10px 15px 20px ;
/* радиус границы: верхний левый верхний правый нижний правый нижний левый */
  • Сокращенное свойство эквивалента Mozilla выглядит следующим образом:
 
 /* -moz-border-radius: [верхний левый] [верхний правый] [нижний правый] [нижний левый] */
-moz-border-radius: 5px 10px 15px 20px ;

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

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

СИНТАКСИС 

 
 border-radius : радиус по горизонтали / радиус по вертикали

Пример 

 
 радиус границы: 50px/10px;
  • Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
  • Если нам нужна более сложная форма, мы можем использовать четыре значения для горизонтального и вертикального радиусов.
    Пример 
 
 радиус границы: 30px 20px 30px 20px/20px 30px 20px 30px;
/* border-radius : горизонтальный верхний левый горизонтальный верхний правый горизонтальный нижний правый горизонтальный нижний левый / вертикальный верхний левый вертикальный верхний правый вертикальный нижний правый вертикальный нижний левый */
}
  • Составляющие свойства остаются теми же для эллиптического округления. Мы можем указать радиус границы для каждого угла отдельно, используя значения, разделенные пробелом, а не разделенные косой чертой. Пример 
 
 граница-верхний-левый-радиус: 40px 20px; /* горизонтальный радиус, вертикальный радиус */
  граница-верхний-правый-радиус: 20px 40px;
  граница-нижний-правый-радиус: 40px 20px;
  граница-нижний-левый-радиус: 20px 40px;

Эллиптическое округление (Firefox 3.5+)

СИНТАКСИС

Нам нужен префикс -moz, так как Mozilla Firefox 3.5 допускал только закругленные углы. Однако более поздние версии Firefox также позволяют использовать эллиптические углы.

 
 -moz-border-radius-topleft: [горизонтальный радиус] [вертикальный радиус];

Этот синтаксис также применяется к другим составляющим свойствам.

Пример 

 
 -moz-border-radius-topleft: 20px 40px;
-moz-border-radius-topright: 10px 30px;
-moz-border-radius-bottomleft: 20px 40px;
-moz-border-radius-topleft: 10px 30px;

Сокращенное эллиптическое округление (Firefox 3.

5+)
  • Одна пара значений горизонтального и вертикального радиусов скругляет все четыре угла.
 
 -moz-border-radius: 10px/40px;
/* -moz-border-radius: горизонтальный радиус / вертикальный радиус */
  • Мы можем даже указать четыре значения для горизонтального и вертикального радиусов. Эти значения представляют верхний левый, верхний правый, нижний правый и нижний левый углы.
 
 -moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;
/* -moz-border-radius : горизонтальный верхний левый горизонтальный верхний правый горизонтальный нижний правый горизонтальный нижний левый / вертикальный верхний левый вертикальный верхний правый вертикальный нижний правый вертикальный нижний левый */

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

  • Все углы Такие браузеры, как Chrome и Safari, поддерживают эллиптическое округление WebKit. Мы можем использовать следующее сокращенное свойство для эллиптического округления всех углов.

    СИНТАКСИС 

     
     -webkit-border-radius: [горизонтальный радиус] [вертикальный радиус];

    Пример 

     
     -webkit-border-radius: 32px 10px;

  • Только правые углы Чтобы эллиптически закруглить правые углы элементов, мы будем использовать следующий синтаксис: СИНТАКСИС 

     
     -webkit-border-top-right-radius: [горизонтальный радиус] [вертикальный радиус];
-webkit-border-bottom-right-radius: [горизонтальный радиус] [вертикальный радиус];

    Пример 

     
     -webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;

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

Примеры

Пример 1. В этом примере описывается свойство Border-Radius для создания закругленных углов Css

HTML 

 
 

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

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Равномерно скругляет все углы */
 радиус границы: 30px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Вывод

Пример 2. В этом примере описывается использование свойства Border-Bottom-Left-Radius

HTML 

 
 

  
 Скругление нижнего левого угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет нижний левый угол */
 радиус нижнего левого края: 50 пикселей;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выход

Пример 3.

В этом примере описывается использование свойства Border-Top-Right-Radius

HTML 

 
 <дел>
  
 Скругление правого верхнего угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет правый верхний угол */
 граница-верхний-правый-радиус: 50px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выходные данные

Пример 4. В этом примере описывается использование свойства Border-Bottom-Right-Radius

HTML 

 
 

  
 Скругление нижнего правого угла

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет правый нижний угол */
 граница-нижний-правый-радиус: 50px;
 поля:авто ;
  
}
. текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Выход

Пример 5. В этом примере описывается использование свойства Border-Top-Left-Radius

HTML 

 
 

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

CSS 

 
 .container {
 граница: 8 пикселей, сплошной черный цвет;
 ширина: 350 пикселей;
 высота: 250 пикселей;
 цвет фона: голубой;
/* Скругляет верхний левый угол */
 граница-верхний-левый-радиус: 30px;
 поля:авто ;
  
}
.текст{
  размер шрифта: 25 пикселей;
  выравнивание текста: по центру;
}

Вывод

Пример 6. В этом примере описывается использование сокращенных свойств

HTML 

 
 

  
 Указание одного значения.

  
 радиус границы: 50 пикселей 



<дел>
  
 Указание двух значений. 

  
 радиус границы: 10px 15px ;
<дел>

Указание трех значений.

радиус границы: 50px 30px 90 пикселей;

<дел>

Указание четырех значений.

радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей;