Закругление углов css: Как закруглить углы в CSS и HTML. Закругление углов картинок.

Leave a Comment / Css / By /

Содержание

Радиус границы — 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 md:rounded-lg to apply the rounded-lg utility at only medium screen sizes and above.

<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.

Внутреннее скругление — Как создать сайт

Внутреннее скругление

Проблема

Иногда нам требуется контейнер, скругленный только изнутри, внешние углы рамки/контура которого все так же остаются прямыми. Это интересный не избитый эффект. Подобного эффекта легко добиться с помощью двух элементов:

 

<div><div>
I have a nice subtle inner rounding, don't I look pretty?
</div>
</div>
. something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > 
div {
background: tan;
border-radius: .8em;
padding: 1em;
}

Это прекрасно работает, но нам приходится использовать два элемента, тогда как в действительности требуется только один. Можно ли достичь того же эффекта с одним элементом?

 

Решение

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

Однако если мы имеем дело исключительно со старыми добрыми сплошными цветами, то нам хватит и одного элемента (хотя это и грязный способ). Взгляните на следующий фрагмент CSS-кода:
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 . 6em #655;
outline: .6em solid #655;
Можете угадать, каким будет визуальный результат?  По сути, мы воспользовались тем фактом, что контуры не повторяют скругление углов элемента (и, следовательно, обладают прямыми углами, а тени ( box-shadow ), наоборот, скругляются.

Следовательно, если мы наложим их друг на друга, то  box-shadow закроет «дыры», которые контур оставляет по углам, и комбинация этих свойств даст нам необходимый эффект. Обратите внимание, что в действительности  box-shadow не требуется размазывать на величину контура — хватит размазывания, достаточного для заполнения этих «дырок». В действительности, если размазывание будет равно ширине контура, то в некоторых браузерах это может привести к появлению визуальных артефактов, поэтому я рекомендую использовать значение чуть меньше. Это сразу вызывает вопрос: какова минимальная величина размазывания, которую необходимо указать, чтобы закрыть «дыры»?

Использование свойства  outline на скругленном элементе

Использование свойства  box-shadow без смещения и размытия на элементе со скругленными углами

Здесь контур подсвечен черным цветом, а тень пурпурным это помогает понять, что происходит с этим элементом. Обратите внимание, что контур рисуется поверх тени
Для того чтобы ответить на этот вопрос, необходимо вспомнить теорему Пифагора, которую мы все изучали в школе и которая позволяет вычислять длины сторон прямоугольных треугольников. Согласно теореме, длина гипотенузы (самой длинной, диагональной стороны треугольника) равна
√(a2+b2)
где a и b — длины катетов. Если катеты равны по величине, то формула превращается в Возможно, вы задаетесь вопросом, какое отношение геометрия уровня средней школы имеет к эффекту скругления внутреннего угла. Взгляните на рисунок


эта схема дает визуальную подсказку относительно того, как вычислить минимальную ширину размазывания. В нашем случае значение  border-radius равно .8em, следовательно, минимальное размазывание равно  .8( 2 1) .33137085em . Все, что нам остается — слегка округлить это значение вверх и указать радиус размазывания .34em. Чтобы избежать необходимости проводить подобные вычисления каждый раз, когда вам требуется данный эффект, можно попросту использовать половину радиуса угла, что гарантированно даст достаточно большое значение,  Обратите внимание также, что данные вычисления обнаруживают еще одно ограничение этого метода:
для того чтобы наш эффект сработал, радиус размазывания должен быть меньше ширины контура, но больше   , где r — это значение  border-radius.
Это означает, что если ширина контура меньше, то применить данный эффект невозможно.

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/inner-rounding

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 500 times, 1 visits today)

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

Улучшить статью

Сохранить статью

  • Последнее обновление: 14 сент, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Синтаксис: 

     /* Устанавливает значение радиуса для всех 4 углов */
радиус границы: значение;

    Пример 1: В этом примере описывается радиус границы для закругления углов.

    HTML

    < html lang = "en" >

       

    < head >

         < мета кодировка = "UTF-8" >

    < Meta HTTP-EQUIV = "X-ua-equivible = " X-ua-equivible = "X-ua-equivible = " X-equivible = "X-Equivible = " X-Equivible = ". = Edge " >

    < Meta Имя = " Viewport " = 9003

    . 1,0" >

    < Стиль >

    .Container {

    40 .

                 ширина: 300 пикселей;

                 высота: 200 пикселей;

                 цвет фона: цвет морской волны;

                 /* Этот набор радиусов для всех 4 углов */  

                 border-radius: 10px;

             }

         style >

    head >

       

    < body >

         < H3 Стиль = "Цвет: зеленый" > Heeksforgeeks H3 >

    >

    >

    " >

    < P Текст-ALIGN = " Центр " > Кругный угло0042

         div >

    body >

       

    html >

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

    закругленный угол

     

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

    HTML

    < html lang = "en" >

       

    < head >

    < Meta Charset = "UTF-8" >

    <

    <

    <

    >

    . 0041 meta http-equiv = "X-UA-Compatible" content = "IE=edge" >

         < meta name = "viewport"  

               content = "width=device-width, initial-scale=1.0" >

          

         < стиль >

             .container {

         ;        граница

                 ширина: 300 пикселей;

                 высота: 200 пикселей;

                 цвет фона: цвет морской волны;

                 радиус нижнего левого края: 30 пикселей;

             }

         style >

    head >

       

    < body >

    < H3 > Geeksforgeeks H3 >

    < Div 0042 class = "container" >

             < p text-align = "center" > 

                 This is Rounded corner at < B > внизу влево B >

    P >

    P >

    P >

    . 0041      div >

    body >

       

    html >

    Output:

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

    HTML

    < html lang = "en" >

       

    < head >

    < Meta Charset = "UTF-8" >

    < META HTP-EQUINTP-EQUINTTP-EQUINTTP- . 0042 = "X-UA-Compatible" content = "IE=edge" >

         < meta name = "viewport"

               content = "width=device-width, initial-scale=1.0" >

          

         < style >

             .container {

                 граница: 1 пиксель сплошной черный;

                 ширина: 300 пикселей;

                 высота: 200 пикселей;

                 цвет фона: цвет морской волны;

                 border-top-right-radius: 30px;

             }

         style >

    head >

       

    < body >

         < h3 >GeeksforGeeks h3 >

         < div 2 2 "Контейнер" >

    < P TEXT-ALIN > Верхний правый. 0041 div >

    body >

       

    html >

    Output:

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

    HTML

    < html lang = "en" >

       

    < head >

         < meta charset = "UTF-8" >

    < Мета HTTP-EQUIV = "X-ua-equivible" = "x-ua-equivible" = "x-equivible = 0041 content = "IE=edge" >

         < meta name = "viewport"  

               content = "width = ширина устройства, начальная масштаба = 1,0 " >

    < Стиль >

    >

    >

    >

    >

    > 0041 . container {

                 граница: 1 пиксель сплошной черный;

                 ширина: 300 пикселей;

                 высота: 200 пикселей;

                 цвет фона: цвет морской волны;

                 радиус нижней правой границы: 30 пикселей;

             }

         style >

    head >

       

    < body >

         < h3 > Geeksforgeeks H3 >

    < DIV Класс = "Контейнер" > = " >0042

    < P Text-Align = "Центр" >

    . B >

    P >

    DIV >

    0040 body >

       

    html >

     

    Output:

    Example 5: This example описывает использование свойства border-top-left-radius для создания угла в левом верхнем углу.

    HTML

    < html lang = "en" >

       

    < head >

         < meta charset = "UTF-8" >

    < Мета HTTP-EQUIV = "X-U-Compatible" "X-UA-Compatible" "X-UA-Compatible" "X-UA. 0041 = "IE=edge" >

         < meta name = "viewport"  

               content = "width=device- Ширина, начальная масштаба = 1,0 " >

    < Стиль >

    .container {

    .container {

    .container {

    .container {9003

    .0042

                 граница: 1 пиксель сплошной черный;

                 ширина: 300 пикселей;

                 высота: 200 пикселей;

                 цвет фона: цвет морской волны;

                 border-top-left-radius: 30px;

             }

         style >

    head >

       

    < body >

         < h3 >GeeksforGeeks H3 >

    < DIV Класс = "Контейнер" >

    900

    041 < P Text-Align = "Центр" >

    . >

    P >

    DIV >

    11111111 годы0041 body >

       

    html >

    Output:

    top left 

    Shorthands:

    Apply Radius value to all четыре угла: 

     радиус границы: значение;

    Применить значение1 к верхнему левому и нижнему правому углам, а значение2 — к верхнему правому и нижнему левому углам. 

     радиус границы: значение1 значение2;

    Применить значение1 к верхнему левому углу, значение2 к верхнему правому и нижнему левому углам и значение3 к нижнему правому углу. 

     радиус границы: значение1 значение2 значение3;

    Применить значение1 к верхнему левому углу, значение2 к верхнему правому углу, значение3 к нижнему правому углу и значение4 к нижнему левому углу. 

     радиус границы: значение1 значение2 значение3 значение4;

    Статьи по теме

    Как сделать закругленный угол с помощью 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 — это сокращенное свойство, которое равномерно скругляет все углы элемента. Мы можем указать радиус границы в пикселях или процентах.

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

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

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

    Стандартный

    Для различных браузеров, включая 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 — это сокращенное свойство, определяющее радиус для всех углов элемента. Мы можем независимо указать радиус границы для каждого угла, используя следующие составляющие свойства:

    Constituent Property Mozilla Equivalent Webkit Equivalent Description Example
    border-top-left-radius -moz-border-radius-topleft -webkit-border -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-border-bottom-left-radius Скругляет нижний правый угол элемента. граница-нижний-левый-радиус: 10px;

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

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

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

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

    СИНТАКСИС 

     
     радиус границы : радиус по горизонтали / радиус по вертикали

    Пример 

     
     радиус границы: 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 пикселей;