Border radius html – Свойство border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius — скругленные уголки

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

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

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

border-radius: 50px / 30px;

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

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

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

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

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

Синтаксис

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

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

Пример

div {
border-radius: 100px;
}

puzzleweb.ru

Свойство border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius — скругленные уголки

Свойство border-radius создает скругленные уголки для границы и фона.

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

Синтаксис

Свойство border-radius может принимать 1, 2, 3 или 4 параметра, остальные свойства — только один параметр.

селектор {
	border-radius: 200px;
}

селектор {
	border-radius: 30%;
}

селектор {
	border-radius: 20px 30px;
}

селектор {
	border-radius: 20px 30px 40px;
}

селектор {
	border-radius: 20px/30px;
}

селектор {
	border-radius: 20px/30px 30px/50px; - так не работает
}

селектор {
	border-radius: 35px 25px 30px 20px / 40px 50px 15px 30px; - а вот так работает
}

селектор {
	border-radius: 20px 30px 40px 50px;
}

селектор {
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 40px;
}

селектор {
	border-top-left-radius: 10px/20px; - так не работает
}

Значения для border-radius

Значение по умолчанию: 0.

Примеры

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px dotted black;
	border-radius: 10px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 40px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 50px 30px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 30px 50px 70px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

В данном примере мы можем наблюдать эллиптическое скругление (20px горизонтальная часть скругления, 40px — вертикальная):

#elem {
	border: 1px solid black;
	border-radius: 20px/40px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

#elem {
	border: 1px solid black;
	border-radius: 35px 25px 30px 20px / 40px 50px 15px 30px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

Минимальный (если поставить больше — все равно будет круг) border-radius для того, чтобы сделать круг из квадрата — половина ширины/высоты (у квадрата они равны):

#elem {
	border: 1px solid black;
	border-radius: 100px;
	width: 200px;
	height: 200px;
}

Результат выполнения кода:

Пример

Предыдущую задачу можно решить иным способом, если установить border-radius в 50% (преимущество в том, что при изменении высоты/ширины не придется менять скругление):

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Результат выполнения кода:

Пример

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

#elem {
	border: 1px solid black;
	border-radius: 10%;
	width: 400px;
	height: 200px;
}

Результат выполнения кода:

Пример

Воспользуемся свойствами для каждого угла отдельно:

#elem {
	border: 1px solid black;
	border-top-left-radius: 10px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 70px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

Обратите внимание на то, что в данном примере скругляются уголки не границы, а фона:

#elem {
	background-color: #E4F1ED;
	border-radius: 20px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

code.mu

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

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

Кроссбраузерная совместимость.

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 3.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях  -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами.  Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

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

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

В CSS зададим для него высоту, ширину и цвет фона:

#box {
 width:590px;
 height:100px;
 background-color:#6B86A6; }
 

Добавляем свойство border-radius:

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

#box {
-moz-border-radius: 20px;
}

Теперь все четыре угла будут иметь радиус 20px:

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

#box {
-moz-border-radius:20px 40px;
}

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

#box {
-moz-border-radius:10px 20px 30px 40px;
}
 

Объявляем свойство border-radius для каждого угла

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

• -moz-border-radius-topleft для верхнего левого угла;
• -moz-border-radius-topright для верхнего правго угла;
• -moz-border-radius-bottomright для нижнего правого угла;
• -moz-border-radius-bottomleft для нижнего левого угла;

Горизонтальный и вертикальный радиус

#box {
-moz-border-radius-topleft: 30px 15px;
}
 

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

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

#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

Использование свойства border-radius в Safari и Chrome.

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:

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

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

Этот код не будет работать в Safari и Chrome:

#box {
-webkit-border-radius: 10px 20px 30px 40px;
}
 

Правильный код будет выглядеть так:

#box {
 -webkit-border-top-left-radius: 10px;    
-webkit-border-top-right-radius: 20px;    
-webkit-border-bottom-right-radius: 30px;    
-webkit-border-bottom-left-radius: 40px;
}

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:

#box {
-webkit-border-top-left-radius: 30px 15px;
}

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

#box {
-webkit-border-radius: 30px 15px;
}

Примеры.

Источник

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

www.webmasters.by

Закруглённые углы (свойство 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;

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

shpargalkablog.ru

Свойство border-radius | Учебник HTML5

Свойство border-radius.

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

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

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px;

-webkit-border-radius: 20px; border-radius: 20px;

}

#title {

Font: bold 36px verdana, sans-serif;

}

Свойство border-radius пока что находится на этапе разработки, поэтому мы добавили префиксы — moz — и — webkit — (так же, как делали это для свойств, которые изучали в главе 2). Если все углы должны быть одинаковыми, то свойству можно передать только одно значение. Однако аналогично свойствам margin и padding, данное свойство позволяет указывать индивидуальные значения для каждого угла.

Листинг 3.4. Разные значения для всех углов поля

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px 10px 30px 50px;

-webkit-border-radius: 20px 10px 30px 50px; border-radius: 20px 10px 30px 50px;

}

#title {

Font: bold 36px verdana, sans-serif;

}

Как вы видите в листинге 3.4, четыре значения, связанные со свойством border-radius, представляют четыре местоположения в следующем порядке: верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол. Значения всегда перечисляются, начиная с верхнего левого угла по часовой стрелке.

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

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

Листинг 3.5. Эллиптические углы

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px / 10px;

-webkit-border-radius: 20px / 10px;

Border-radius: 20px / 10px;

}

#title {

Font: bold 36px verdana, sans-serif;

}

Скопируйте в CSS-файл с именем newcss3.css стили, которые вы хотели бы протестировать, и откройте HTML-файл из листинга 3.1 в своем браузере.

Вам также могут быть интересны следующие статьи:

html5ru.com