Скруглённые уголки
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div | Радиус скругления для всех уголков сразу. |  |
| div | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к <button> применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Закруглённые углы (свойство border-radius) | CSS
Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.
background box-shadow outline [решение] border-image [решение]
Круглые углы у картинки
border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения. 
Закруглить края у видео на YouTube
HTML таблица с закругленными углами
Закруглить таблицу можно, но с border-collapse: separate;
| 1 | 2 | 3 |
|---|---|---|
| 1.1 | 2.1 | 3.1 |
| 1.2 | 2.2 | 3.2 |
border-radius у вложенных элементов
Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы
CSS скругление углов у border-image
Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.
Округление outline
Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).
Закругление углов в примерах
HTML овал
HTML круг
Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.
HTML цилиндр
Закругленные три края, HTML капля
HTML полукруг
HTML лист
HTML яйцо
Камушек HTML
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 А я увидела в исходном коде не точку, а "яЛП"
По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на "Шпаргалку блоггера" ведут в основном такие.
Свойство CSS border-radius
Практически всем блочным элементам в HTML можно закруглять углы (например, тег <div>, тег <img>, тег <table>). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius :
Как скруглить углы в HTML через CSS
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш «/» в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border:
- Толщина — задается чаще всего в пикселях
- Тип линии может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр — цвет (#a0b).
Мы приводили всегда в качестве примеров тег <div> . Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .
Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS: