Закруглённые углы (свойство 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 class="radius">содержимое блока с закруглёнными углами</div>

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

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

[решение] [решение]

<div class="radius">содержимое блока</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 class="tableR">
  <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 class="dva1"><div></div></div> <div class="dva2"></div> <div class="dva3"><div></div></div>

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

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

47px = 32px + 15px

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

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

<div class="border-image-radius"> <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 class="radius">...</div>

HTML круг

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

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

     <div class="radius">...</div>

HTML цилиндр

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

     <div class="radius">...</div>

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

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

<div class="radius">...</div>

HTML полукруг




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

<div class="radius">...</div>

HTML лист




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

<div class="radius">...</div>

HTML яйцо






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

  <div class="radius">...</div>

Камушек HTML



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

   <div class="radius">...</div>
Слайды с конференции
в f t
наверх ↑

29 комментариев:

Tanka
Спасибо! Очень интересно =)
витько
Польза.
Приятный сайт,полезная статья
Анонимный
Спасибо большое! Давно искала такой материал!!! Супер сайт!!!!!
Наталка Михайлівна Зуб
Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/
NMitra
Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html
Наталка Михайлівна Зуб
Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает!
Сергей
А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта.
Сергей
В IE не работает, не критично - для информации
NMitra
Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius
Космо Мизраил
"Чтобы сделать круг, нужно использовать квадрат."
Мой мозг х) Наталья, может, стоит написать "использовать блок квадратной формы"? :)
NMitra
Ха-ха-ха.. Подправила.
Евгений Курочкин
Отличная статья!
Для скругления в IE 6-8 есть доп коды - http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним.
NMitra
На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта - нажми кнопку "Обновить".
Анонимный
Мне понравилась фига - фавикон сайта =)
NMitra
Мне тоже)) Жаль, что её некоторые путают с другой частью тела.
Родион
Спасибо огромное!
NMitra
Пожалуйста!
Анна Сычева
Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени - это просто праздник :)
NMitra
Рада слышать!
Анонимный
бабки давай сюда!
Fedor Timofeev
Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
для другого див
NMitra
Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%?
Fedor Timofeev
Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

class="grayscale grayscale-fade"
CSS: /*обесцвечивание круглой картинки */

img.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
}
.grayscale.grayscale-replaced > svg {
transition: opacity 1s ease;
opacity: 1;
}
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}

/*обесцвечивание круглой картинки конец */


CSS: /*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */
Fedor Timofeev
что все дивы куда то подевались.
NMitra
Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так "Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%".
Fedor Timofeev
Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
}
.grayscale.grayscale-replaced > svg {
transition: opacity 1s ease;
opacity: 1;
}
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}
img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius {
border-radius: 15px;
background: #e7d5c0;
}
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает.
NMitra
Проверяйте ошибки в CSS. Я, например, увидела "яЛП"

img.grayscale {
width: 200px;
height: 200px;
border-radius: 50%;
}яЛП
Fedor Timofeev
Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.!!
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel="nofollow" на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra
А я увидела в исходном коде не точку, а "яЛП"

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на "Шпаргалку блоггера" ведут в основном такие.