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

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

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

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

index.html

<html>
<head>
<link rel=»stylesheet» href=»style1.css» type=»text/css» />
</head>
<body>
<span class=»b1″></span><span class=»b2″></span><span class=»b3″></span><span class=»b4″></span>
<div class=»content»>
<center>Блок с закруглёнными углами</center>
</div>
<span class=»b4″></span><span class=»b3″></span><span class=»b2″></span><span class=»b1″></span>
</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

Метки: 

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

  1. Pirat | 18 августа 2010 @ 12:32
  2. Статья неплохая, но настолько «изжевана»! Кто только не писал об этом, лично я знаю около пяти или шести способах…

    Ответить

  3. seogrot | 19 августа 2010 @ 17:39
  4. Я не сомневаюсь в том, что вы знаете 5-6 способов :) создания закруглённых углов. Мне тоже известен не один метод! В начале статьи я указал, что приведу один из наиболее простых, на мой взгляд, примеров.

    Ответить

  5. user | 14 ноября 2010 @ 22:33
  6. border-radius: 12px;
    -moz-border-radius: 12px;

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

    Ответить

  7. Jack | 6 января 2011 @ 17:05
  8. не работает

    Ответить

  9. seogrot | 10 января 2011 @ 1:00
  10. Что именно не работает?

    Ответить

Добавить комментарий для Jack Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *