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

15 февраля 2020 | Автор: seogrot | Категория: Уроки вёрстки

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 комментариев к "Создаём закругленные углы с помощью 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;

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