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

Август 5th, 2010

css стили Есть множество способов закруглить углы на web-странице. Сегодня приведу пример, на мой взгляд, одного из наиболее простых вариантов создания эффекта закруглённых углов. Никаких Java-скриптов и картинок использовать не буду, только html и css. Единственный недостаток этого метода – использование пустых тегов.

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

index.html

<html>
<head>
<link rel=”stylesheet” href=”style1.css” type=”text/css” />
</head>
<body>

<div class=”content”>
<center>Блок с закруглёнными углами</center>
</div>

</body>
</html>

style.css

/* Задаём отображение границ и углов */
.b1, .b2, .b3, .b4 {
display:block;
overflow:hidden;
}
/* Задаём высоту границ и углов */
.b1, .b2, .b3 {
height:1px;
}

.b2, .b3, .b4 {
background:#cccccc; /* Задаём цвет фона в пределах закругления */
border-left:1px solid #00346e; /* Задаём стили для левых углов */
border-right:1px solid #00346e; /* Задаём стили для правых углов */
}
/* Задаём ширину, отступы и цвет границ для закругления */
.b1 {
width: 247px;
background:#00346e;
margin:0 0 0 5;
}

.b2 {
width: 247px;
border-width: 2px;
background:#930D03;
margin:0 0 0 3;
}

.b3 {
width: 251px;
margin:0 0 0 2;
background:#930D03;
}

.b4 {
height:1px;
width: 253px;
margin:0 0 0 1;
background:#930D03;
}

.content {
background:#930D03; /* Задаём общий фон */
border:0 solid #00346e; /* Задаём стили границ */
border-width:0 1px; /* Задаём ширину границ */
width: 255px; /* Задаём ширину блока */
height: 50px; /* Задаём высоту блока */
color:#73FF63;
font-size: 15px;
font-family: Geneva, Arial, Helvetica, sans-serif; /* Задаём стили для текста */
}

/* Fix IE. Hide from IE Mac \*/
*html .b1 { width: 246; }
*html .b2 { width: 249; }
/* End */

Вот как будет выглядеть блок – Закругление углов с помощью css
Скачать Example2.zip

Тэги: css закругленные углы, закругленные углы, создание закругленных углов

Категория: Уроки вёрстки

5 Комментариев to “Создаём закругленные углы с помощью CSS”

Pirat пишет:

18 Август 2010 в 12:32

Статья неплохая, но настолько “изжевана”! Кто только не писал об этом, лично я знаю около пяти или шести способах…
seogrot пишет:

19 Август 2010 в 17:39

Я не сомневаюсь в том, что вы знаете 5-6 способов :) создания закруглённых углов. Мне тоже известен не один метод! В начале статьи я указал, что приведу один из наиболее простых, на мой взгляд, примеров.
user пишет:

14 Ноябрь 2010 в 22:33

border-radius: 12px;
-moz-border-radius: 12px;

первая строка не работает в фаерфоксе, а использование только второй, дает правильный результат только в ФФ а в Опере слишком сильно закругляет. А если написать обе строки сразу, то в обеих браузерах отображает правильно. И лишь интернет эксплорер курит в сторонке.
Jack пишет:

6 Январь 2011 в 17:05

не работает
seogrot пишет:

10 Январь 2011 в 1:00

Что именно не работает?

RSS лента

Поcледние записи

Последние комментарии

seogrot: Представьте себе есть. Какой из перечисленных пунктов вы считаете...
Traftomoney: У вас самого есть опыт ведения интернет магазина? Что за бред вы...
Inna: Плагин установила – работает. Спасибо за инструкцию.
BadBoyFromTheRai: Давно эта тема не поднималась) Смотрю народ оживился
seogrot: Заказное письмо обошлось мне в 7 грн 50 коп. Чек был на 114.14 $, на...

Облако тегов

Облако тегов плагина WP Cumulus (русская версия плагина) требует для просмотра Flash Player 9 или выше.

Подписки

Интересное

Внимание! При использовании материалов АКТИВНАЯ ССЫЛКА на блог SEOGROT.COM обязательна!

Blog Seo Grot