Css скругление: свойство border-radius — учебник CSS

свойство border-radius — учебник CSS

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

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

. borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

Стиль, описанный выше, даст следующий результат на элементе <div> размером 200×200 пикселей:

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

.borderElement1 {
  background-color: #FFE8DB;
  border: 6px solid #FF5A00;
  border-radius: 15px 100px 15px 100px;
}

. borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 280px/100px;
}

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

• border-top-left-radius — для верхнего левого угла;
• border-top-right-radius — для верхнего правого угла;
• border-bottom-left-radius — для нижнего левого угла;
• border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу.

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

border-radius | htmlbook.ru

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию	http://www. w3.org/TR/css3-background/#the-border-radius

Версии CSS

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений

Число значений	Результат
1	Радиус указывается для всех четырех уголков.
2	Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3	Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0.

  
 5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

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

Скругление углов CSS | Impuls-Web.ru

Приветствую вас, дорогие читатели!

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

Навигация по статье:

Простое скругление углов CSS

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

.radius-block{ border-radius: 25px; }

В данном случае для блока задается параметр для всех сторон.

Равномерное закругление

Варианты скругления углов CSS

Так же, можно задавать радиус для каждого отдельного угла. Например:

.radius-block2{ border-radius: 5px 15px 25px 35px; }

Разное закругление

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

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

. radius-block3{ border-radius: 5px 35px; }

Симметричное закругление

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

Необычное скругление углов CSS

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

Для этого нам нужно задать два параметра скругления через слеш. Например:

.radius-block4{ border-radius: 60px/25px; }

Необычное закругление

Используя данный вариант можно даже элипс:

.radius-block5{ border-radius: 250px/75px; }

Элипс

Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

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

А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

С уважением Юлия Гусарь

border-radius — CSS | MDN

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

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse.

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

• одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
• одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

<percentage>

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

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

BCD tables only load in the browser

border-radius — закругленная рамка (скругление углов)

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

12. 0+	9.0+	4.0+	5.0+	10.5+	5.0+

Описание

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

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

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

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

border-radius: 50px / 30px;

Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

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

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

Синтаксис

border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]

Значения свойства

Значение	Описание
величина	Величина радиуса указывается в единицах измерения, используемых в CSS.
%	Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-radius: 100px;
}

Закруглённые углы (свойство border-radius) | CSS — Примеры

Генератор border-radius CSS

<style>
.radius {
  border: 2px solid CornflowerBlue;
  border-radius: 0 ;
}



.radius {
  border: 2px solid CornflowerBlue;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
</style>

<div>содержимое блока с закруглёнными углами</div>

Как сделать закругленные углы CSS

Использование свойства CSS border-radius (w3. org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

<div>содержимое блока</div>

Круглые углы у картинки

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

<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg" style="border-radius: 100%;">

Закруглить края у видео на YouTube

<iframe src="http://www.youtube.com/embed/fXwUPXY9eaY?rel=0" frameborder="0" allowfullscreen style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"></iframe>

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1	2	3
1. 1	2.1	3.1
1.2	2.2	3.2

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
    <tr>
      <td>1.1</td>
      <td>2.1</td>
      <td>3.1</td>
    </tr>
    <tr>
      <td>1.2</td>
      <td>2.2</td>
      <td>3.2</td>
    </tr>
</table>

border-radius у вложенных элементов

Сравните

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

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки

47px = 32px + 15px

CSS скругление углов у border-image

Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

<div> <div> <div>содержимое блока</div> </div> </div>

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

<style>
.radius {
  height: 200px;
  border: 7px solid red;
  border-radius: 100%; 
}
</style>

<div>...</div>

HTML круг

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

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px solid red;
        border-radius: 100%; 
      }
      </style>

     <div>...</div>

HTML цилиндр

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px dashed red;
        border-radius: 100%/20%; 
      }
      </style>

     <div>...</div>

Закругленные три края, HTML капля

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px inset red;
  border-radius: 0% 100% 100%;
}
</style>

<div>...</div>

HTML полукруг

<style>
.radius {
  width: 200px; height: 200px;
  border: 1px dashed red;
  border-radius: 100% 100% 0% 0%;
}
</style>

<div>...</div>

HTML лист

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px groove red;
  border-radius: 70% 0 / 70%;
}
</style>

<div>...</div>

HTML яйцо

  <style>
  .radius {
    width: 200px; height: 300px;
    border-radius: 80% / 100% 100% 60% 60%; 
    background: #f1f1f1;
  }
  </style>

  <div>...</div>

Камушек HTML

   <style>
   .radius {
     width: 200px; height: 200px;
     border-radius: 60% 80% / 100% 90% 60% 50%;
     background: #f1f1f1;
   }
   </style>

   <div>...</div>

border-radius — CSS: Каскадные таблицы стилей

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

Радиус применяется ко всему фону , даже если элемент не имеет границы; точное положение отсечения определяется свойством background-clip .

Свойство border-radius не применяется к элементам таблицы, когда border-collapse равно collapse .

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

Это свойство является сокращением для следующих свойств CSS:

 

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


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


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


радиус границы: 1px 0 3px 4px;



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


радиус границы: 10 пикселей 5% / 20 пикселей 30 пикселей;


радиус границы: 10px 5px 2em / 20px 25px 30%;


радиус границы: 10px 5% / 20px 25em 30px 35em;


граница-радиус: наследовать;
радиус границы: начальный;
граница-радиус: вернуться;
граница-радиус: не задано;
  

Свойство border-radius указано как:

• одно, два, три или четыре <длина> или <процент> значений.Используется для установки единого радиуса для углов.
• , за которым необязательно следует «/» и одно, два, три или четыре значения <длина> или <процент> . Это используется для установки дополнительного радиуса, чтобы вы могли иметь эллиптические углы.

Значения

<длина>

Обозначает размер радиуса окружности или большой и малой полуосей эллипса с использованием значений длины. Отрицательные значения недопустимы.

<процент>

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

Например:

  border-radius: 1em / 5em;


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

  border-radius: 4px 3px 6px / 2px 4px;


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

  
граница: сплошная 10 пикселей;
радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
  
окантовка: бороздка 1em красная;
радиус границы: 2em;
  
фон: золото;
бордюр: хребет золото;
радиус границы: 13em / 3em;
  
граница: нет;
радиус границы: 40 пикселей 10 пикселей;
фон: золото;
  
граница: нет;
радиус границы: 50%;
фон: бурливуд;
  
граница: пунктирная;
ширина границы: 10 пикселей 4 пикселя;
радиус границы: 10 пикселей 40 пикселей;
  
граница: пунктирная;
ширина границы: 2px 4px;
радиус границы: 40 пикселей;
   

  pre {
  маржа: 20 пикселей;
  отступ: 20 пикселей;
  ширина: 80%;
  высота: 80 пикселей;
}

pre # example-1 {
  граница: сплошная 10 пикселей;
  радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
}

pre # example-2 {
  окантовка: бороздка 1em красная;
  радиус границы: 2em;
}

pre # example-3 {
  фон: золото;
  бордюр: хребет золото;
  радиус границы: 13em / 3em;
}

pre # example-4 {
  граница: нет;
  радиус границы: 40 пикселей 10 пикселей;
  фон: золото;
}

pre # example-5 {
  граница: нет;
  радиус границы: 50%;
  фон: бурливуд;
}

pre # example-6 {
  граница: пунктирная;
  ширина границы: 10 пикселей 4 пикселя;
  радиус границы: 10 пикселей 40 пикселей;
}

pre # example-7 {
  граница: пунктирная;
  ширина границы: 2px 4px;
  радиус границы: 40 пикселей;
}
  

Живые образцы

Таблицы BCD загружаются только в браузере

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на угол, наложенных на несколько вложенных элементов div .Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу блока.

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

Вот и все.Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).

Конечно, если вы хотите границу…

 
#ok_a_border_then {
    граница: 5px solid # 8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5 пикселей; 
}
  

Woop.

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

 
#monroe {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      border-radius: 6px 12px 18px 24px; 
}
  

Фигуристая.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый угол на первую длину (или процент) и верхний правый + нижний левый на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.

Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».

 
#nanoo {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50 пикселей / 100 пикселей; 
        граница-нижний-левый-радиус: 50 пикселей;
        граница-нижний-правый-радиус: 50 пикселей;
}
  

CSS Закругленные углы и блоки тени CSS

Как нарисовать прямоугольник со скругленными углами?

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

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

Источник

Сокращенное свойство border-radius можно использовать для определения всех четырех углов одновременно, border-radius: 25px ;.

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

вывод

CSS закругленные углы во всех браузерах

В Firefox вам нужно использовать префикс -moz-, который работает так же, как и стандартная версия CSS.

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

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

Как нарисовать круг с помощью CSS?

Скопируйте и вставьте следующий исходный код на свою html-страницу, он нарисует круг на вашей html-странице.

Круг

вывод

Как нарисовать затененный прямоугольник?

CSS-свойство box-shadow может использоваться для определения эффектов тени в элементе box.

Синтаксис:

box-shadow: цвет радиуса размытия x y;

1. x — указывает расстояние по горизонтали справа от поля.
2. y — указывает расстояние по вертикали над прямоугольником.
3. blur — тень будет резкой, чем выше число, тем больше и светлее станет тень.
4. radius — Положительные значения приведут к тому, что тень будет расширяться и увеличиваться в размерах.
5. color — цвет тени

пример

затененный ящик

Когда вы устанавливаете отрицательные значения в x и y, тень будет рисовать слева и над рамкой.

В приведенном выше коде x и y установлены как отрицательные значения, поэтому тень будет рисоваться слева и над прямоугольником.

CSS Box Shadow с одной стороны

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

Тень на нижней стороне

Тень слева

Тень справа

Тень на верхней стороне

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

Закругленные углы на изображениях | IANR Media

1. Добавьте изображение на свою страницу.

Нужна помощь при вставке изображения?

2. Добавьте класс к вашему изображению

Таким образом, ваши стили будут нацелены только на элементы с этим классом.

Примечание: Если вы используете сетку на своей странице и хотите, чтобы изображение всегда занимало всю ширину столбца, в котором оно находится, также добавьте класс dcf-w-100%

3.Уложите углы.

CSS-свойство border-radius — это то, что добавляет закругленные углы.

  img. Round-corners {
  радиус границы: 30 пикселей;
} 
 

Вот как это выглядит:

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

Если вы хотите, чтобы это был круг, добавьте border-radius: 50%; .Это сделает круг только в том случае, если вы начинаете с квадратного изображения.

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

Порядок чисел идет по часовой стрелке, начиная с верхнего левого угла: верхний левый, верхний правый, нижний правый, нижний левый.

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

4. Когда углы будут выглядеть так, как вы хотите, добавьте свои стили в CSS

Внутри UNLcms перейдите в раздел «Внешний вид» вашего сайта и нажмите «Настройки».

Вставьте свои стили в поле CSS вверху, затем прокрутите страницу вниз и нажмите «Сохранить конфигурацию».

Готовый продукт

  img. Round-corners {
  радиус границы: 30 пикселей;
}  

Как создавать блоки с закругленными углами в CSS

До поддержки браузером CSS3 создание блоков с закругленными углами требовало творческого использования фоновые изображения, границы и расположение. К счастью, эти дни прошли. Сегодня браузеры поддерживают CSS3 и его свойства border-radius .Свойства border-radius делают Закруглить углы на коробке несложно.

1. Начните с HTML-страницы, содержащей два поля.

 










 
 Пример 1 
 


 
 Пример 2 
 
 

 

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

    
   # box1 {
   фон: # c00;
    радиус границы: 25 пикселей; 
   }
     

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

    
   #box 2 {
   фон: # ff0;
   радиус границы: 10 пикселей 140 пикселей 30 пикселей 140 пикселей;
   }
     

4. Откройте HTML-страницу в браузере. Две коробки должны выглядеть так:

Border Radius — Tailwind CSS

border-radius CSS полное руководство | Закругленные углы

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

Примером этого является знак «Стоп». Если вы можете представить (или найти) знак «Стоп», у него острые края, что не выглядит естественным, он выделяется на фоне более мягких органических, естественных форм.Вот почему, когда вы разрабатываете веб-сайты и приложения, сообщения об ошибках или сообщения, которые вы хотите, чтобы пользователь видел, должны быть отформатированы в прямоугольники с острыми краями, но в тех случаях, когда вы хотите, чтобы пользователь сосредоточил внимание на контенте или сделал его более светлым, закругленные углы могут быть вашим лучшим вариантом.

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

Свойство border radius является сокращением для border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius. Как и в случае с сокращением полей и отступов, border-radius идет по часовой стрелке, начиная с верхнего левого угла, верхнего правого, нижнего левого и заканчивая нижним правым.

Примеры длинных рамок и радиусов

  .round-box {
 граница-верх-левый-радиус: 50%;
 граница-верх-правый-радиус: 50%;
 граница-нижний-левый-радиус: 50%;
 граница-нижний-правый-радиус: 50%;
}  

Сокращенные примеры border-radius

Чтобы задать для всех 4 углов одинаковое значение, необходимо объявить одно значение:

 .round-box {
 радиус границы: 10 пикселей;
}  

Если в объявлении 3 значения, то первое значение задает верхний левый угол, второе значение — верхнее правое и нижнее левое, а третье значение — нижнее правое:

  .round-box {
 радиус границы: 10 пикселей 40 пикселей 80 пикселей;
}  

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

  .round-box-two {
радиус границы: 40% 0;
}  

Если вы хотите иметь закругленный круг, вы можете использовать радиус границы 50% на квадратном элементе, чтобы создать круг, например:

 .round-box {
 радиус границы: 50%;
}  

Если вы хотите иметь разные радиусы на каждом углу, вы можете сделать это:

  .round-box {
 радиус границы: 20 пикселей 40 пикселей 60 пикселей 80 пикселей
}  

Результатом будет:

• вверху слева: 20px
• вверху справа: 40 пикселей
• внизу справа: 60 ​​пикселей
• внизу слева: 80px

Дополнительные значения по горизонтали и вертикали

В свойстве можно указать другое значение для горизонтального радиуса и вертикального радиуса.Как и в предыдущем случае, вы можете определять значения в пикселях (px) или процентах (%). Значения перед косой чертой задают значения по горизонтали, значения после косой черты — значения по вертикали.

  .round-box {
 радиус границы: 10 пикселей / 50 пикселей;
}  

Обрезка

Иногда можно заметить, что цвет фона или содержимое выходит за пределы границы, если граница изогнута. Это можно предотвратить с помощью свойства background-clip:

  .round-box {
 радиус границы: 10 пикселей / 50 пикселей;
 -moz-background-clip: отступы;
 -webkit-background-clip: поле для заполнения;
 фон-клип: padding-box
}  

Генератор радиуса границы

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

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

Браузер поддерживает border-radius, он поддерживается во всех основных браузерах (например, поддерживается вплоть до Internet Explorer версии 9) в течение многих лет и не требует никаких префиксов, таких как -webkit- и — моз-.

ресурсов

Дополнительная литература

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

Автор

Майкл Гирон — старший дизайнер взаимодействия в Companies House в Кардиффе.