Как сделать круглые углы в css

Скругление углов блока в CSS

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius . В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

#div1

Блок со скруглёнными углами

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

13
14
15
16
17
18
19
20
#rightrad

Блок с отдельными скруглёнными углами

Краткая запись

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

• Сначала идёт верхний левый угол
• затем верхний правый
• затем нижний правый
• затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

21
22
23
24
25
26
27
#allradius

Скругление всех углов по отдельности

Скругление в виде эллипса

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

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

28
29
30
31
32
33
34

#elradius < width: 300px; height: 50px; background-color: #CCC; border-radius: 80px/20px; >

Для отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:

35
36
37
38
39
40
41

Скругление в виде эллипса

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

42
43
44
45
46
47
48

Скругление в процентах

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
2. Задать фон блока.
3. Установить скругление всех углов 50 процентов.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены

Закругление углов таблиц и блоков с помощью css

Чтобы углы таблицы или блока отображались на странице сайта закругленными можно использовать несколько вариантов.

Закругление углов, один фоновый рисунок

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

В HTML пишем:

Текст

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

#table-round1 width:600px;
height:76px;
background: url(‘images/pic.png’) no-repeat;
margin: 0;
padding: 9px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
>

В результате получаем вот такую таблицу:

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

Закругление углов, три фоновых рисунка

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

В HTML пишем:

Текст

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

#table-round3 margin : 0;
padding : 0;
width:600px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
>
.top background : url(‘images/top.png’) no-repeat;
height : 10px;
padding : 0;
margin : 0;
>
.center background : url(‘images/center.png’) repeat-y;
padding : 8px;
margin : 0;
>
.bottom background : url(‘images/bottom.png’) no-repeat;
height : 10px;
padding : 0;
margin : 0;
>

В результате получаем вот такую таблицу:

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

Закругление углов таблиц и блоков без графики

Также без особых усилий можно сделать таблицу или блок с закруглёнными углами не прибегая к услугам графических редакторов, т.е. без графики. Правда, это работает не во всех браузерах. Лучший браузер всех времен (Internet Explorer) опять отличился, этот метод работает во всех популярных браузерах: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

В HTML пишем:

Текст

В CSS указываем цвет фона, цвет рамки, и т.д.

#round background-color: #f5f5f5;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
>

В результате получаем таблицу или блок с закругленными углами:

Углы этого блока (div’а) выглядят закругленными потому что мы использовали CSS3, который понимают все популярные браузеры: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

Еще один вариант закругления углов блоков

Закругленные углы блока популярнейшая вещь в современном веб-дизайне. Чтобы сотворить такое люди придумали довольно много способов. Вот один из них.

В HTML пишем:

Заголовок

Здесь текст

В CSS пишем:

В результате получаем вот такой блок с закругленными углами:

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

Углы этого блока выглядят закругленными потому что я использовал свойства CSS, которые подглядел на одном из сайтов в Интернете, адрес которого давным давно утерян. Количество знаков, которые можно вставить в этот блок неограничено. То есть, это резиновый блок, его можно растянуть вдоль и поперек.

Работает во всех популярных браузерах.

Перед тем как применить какой-либо «рецепт» проверяйте его работу в разных браузерах.

При использовании материалов «HTML-pedia» ссылка на сайт html-pedia обязательна.

Блок с закруглёнными углами CSS и DIV

• Stats: 6836 1
• Author: admin
• Category: Css, Дизайн, Новости, Статті, Шпаргалка
• Comments: Комментариев нет
• Tags: border-radius, HTML закругленные углы, Закругление углов картинок, закругление через css, закруглить углы css, Как закруглить углы картинки, сглаженные углы на сайте

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей css.
2. Закругление углов с помощью HTML кода без записи в файл стилей.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.

1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей css

Сначала создадим элемент div

Пропишем стили:

Наш квадрат готов.

Теперь зададим свойства закругления. Для этого используем команду: border-radius

#test2 Width: 100px;
Height: 100px;
border-radius: 6px;
— webkit-border-radius: 6px;
— moz-border-radius: 5px;
— khtml-border-radius: 10px;
>

Немного подробнее о коде:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;

-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).
Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.

-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.

Так, что наш код можно записать так:

#test2 Width: 100px;
Height: 100px;
border-radius: 10px;
— moz-border-radius: 10px;
— webkit-border-radius: 10px;
— khtml-border-radius: 10px;
>

Закругления для выбранных углов

Если Вам нужно закруглить только выбранные углы. Для этого изменим наш код:

#test3 Width: 100px;
Height: 100px;
border-radius: 0 0 6px 6px;
— moz-border-radius: 0 0 6px 6px;
— webkit-border-radius: 0 0 6px 6px;
— khtml-border-radius: 0 0 6px 6px;
>

Немного подробнее о коде:

1. Верхний левый угол;
2. Верхний правый угол;
3. Нижний правый угол;
4. Нижний левый угол;

Освоив данную технику, вы сможете делать красивые сглаженные углы на своем сайте.

2. Закругление углов с помощью HTML кода без записи в файл стилей css.

HTML закругленные углы. В формировании HTML кода мы вписываем те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:

Закругленные углы с помощью HTML без использования файла Style.css

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML.

Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: «Как закруглить углы картинки?».
В данном разделе статьи мы опишем как это сделать:
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:

В атрибуте url (‘ ‘) вставляете ссылку на свою картинку.
Получаем:

Закругляем углы картинки с добавлением рамки

Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
Создаем стиль: #img-radius

#img-radius border:3px solid #85A0C9;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
>

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

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

Создаем стиль: #img-radius2

#img-radius2 border: 3px solid #F6BF15;
border-radius: 100px 100px 0px 0px;
— webkit-border-radius: 100px 100px 0 0;
— moz-border-radius: 100px 100px 0 0;
>

Создаем стиль: #img-radius3

#img-radius3 border: 7px solid #799F2E;
border-radius: 120px 200px 0 180px;
— webkit-border-radius: 120px 200px 0 180px;
— moz-border-radius: 120px 200px 0 180px;
>

Создаем стиль: #img-radius4

#img-radius4 border: 2px solid #405C0A;
border-radius: 0 180px 0 200px;
— webkit-border-radius: 0 180px 0 200px;
— moz-border-radius: 0 180px 0 200px;
>

Создаем стиль: #img-radius5

#img-radius5 border: 8px solid #787CAA;
border-radius: 300px 0px 150px 300px;
— webkit-border-radius: 300px 0px 150px 300px;
— moz-border-radius: 300px 0px 150px 300px;
>

Создаем стиль: #img-radius6

#img-radius6 border: 5px solid #CCA5D1;
border-radius: 160px 160px 160px 160px;
— webkit-border-radius: 160px 160px 160px 160px;
— moz-border-radius: 160px 160px 160px 160px;
>

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

border — radius : 12px ;
border : 6px solid crimson ;

Пока нет проблем.

Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

border — radius : 12px ;
border : 14px solid crimson ;

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

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