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

Закругление углов картинок бывает очень полезным и часто используется в создание сайта. C выходом CSS3 появилась возможность без всяких извращений сделать этот эффект.
В данной статье научимся самому простому и быстрому способу в прямоугольных формах закруглять углы с помощью CSS и HTML кодов и делать красивые формы картинок для сайта.
Существуют различные по сложности реализации способы преобразовать обычный прямоугольник в прямоугольник с закругленными углами. Мы познакомимся с двумя самыми простыми и быстрыми способами, а также научимся делать картинки и рамки вокруг картинок с закругленными углами для оформления сайта и веб-страниц:

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

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

Сначала создадим элемент div
<div id="test"></div>
Пропишем стили:

#test{
background:#F92;
width: 100px;
height: 100px
}

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

Теперь зададим свойства закругления. Для этого используем команду: 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;
}

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

border-radius: 1 2 3 4;

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

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

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

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

<div style="width: 320px; height: 160px; color: #0000; background: #FF7F00; border: 3px #CCCCCC solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml- border-radius: 10px; border-radius: 10px; padding: 5px;">Закругленные углы с помощью HTML без использования файла Style.css</div>
Получаем:

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

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

Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: «Как закруглить углы картинки?».
В данном разделе статьи мы опишем как это сделать:
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
<div style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;" title="Как вставить картинку на сайт" alt="Как вставить картинку на сайт"></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;
}

Прикрепляем id к картинке:
<div id="img-radius" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;" title="Как вставить картинку на сайт" alt="Как вставить картинку на сайт"></div>

Получаем:

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

<div style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px; border:3px solid #85A0C9;border-radius: 30px;-webkit-border-radius: 30px;-moz-border-radius: 30px;" title="Как вставить картинку на сайт" alt="Как вставить картинку на сайт"></div>

Получаем:

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

Создаем стиль: #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;
}

Код с фоном:
<div id="img-radius2" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;"></div>

Получаем:

Создаем стиль: #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;
}

Код с фоном:
<div id="img-radius3" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;"></div>

Получаем:

Создаем стиль: #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;
}

Код с фоном:
<div id="img-radius4" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;"></div>

Получаем:

Создаем стиль: #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;
}

Код с фоном:
<div id="img-radius5" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 307px; height: 161px;"></div>

Получаем:

Создаем стиль: #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;
}

Код с фоном:
<div id="img-radius6" style="background: url('http://www.it-media.kiev.ua/wp-content/uploads//2015/01/zakryglenie_yglov-kartinki2.png'); width: 161px; height: 161px;"></div>

Получаем: