Закругление углов блока средствами HTML/CSS

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

От автора: Часто перед начинающим верстальщиком возникает ряд задач, которые ему нужно разрешить для выполнения верстки страницы. Одна из наиболее часто встречаемых проблем – это закругление углов блока средствами HTML/CSS.

Сегодня мы разберем и посмотрим на то, как можно закруглить углы блока. В этой статье описан метод закругления углов при помощи позиционного построения блоков.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1

Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Урок 1</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top_corners">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
</div>
<div class="content">
<p>Данный блок закруглен без использования картинок</p>
</div>
<div id="down_corners">
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
</div>
</body>
</html>

Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.

Итак, "xb1","xb2","xb3","xb4","xb5","xb6","xb7"- это блоки, при помощи которых и создаются наши закругленные углы. Данные блоки расположены горизонтально один под другим, как пешеходная зебра, к примеру. Т.е. вначале идет блок "xb1", затем блок "xb2", после этого блок "xb3"и так до блока "xb7" включительно. Все блоки отличны, либо равны, по своей ширине от блока "соседа" (в противном случае закругления углов блока у нас не было бы, в итоге мы получили бы обычный прямоугольник).

Блок "top_corners" — блок, в котором расположены блоки "xb1","xb2","xb3","xb4","xb5","xb6","xb7" в порядке возрастания. За счет данной последовательности ("xb1","xb2",…,"xb7") образуются верхние закругленные правый и левый углы нашего блока.

Блок "down_corners" — блок, в котором расположены блоки "xb7","xb6","xb5","xb4","xb3","xb2","xb1" в порядке убывания. Если придерживаться этой последовательности ("xb7","xb6",…,"xb1",), то у нас образуются закругленные нижние правый и левый углы.

Т.о., мы создали все четыре закругленных угла блока (при помощи блоков "xb1","xb2",…,"xb7"). Но у вас наверняка возникнет вопрос: " – Зачем нам блок "content"?". Данный блок является контентной частью нашего блока (блока с закругленными углами). Если в блоке должна располагаться какая-либо информация, то ее необходимо прописывать именно в рамках блока "content".

Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.

Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока:

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

А также нижнего левого:

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

Шаг 2

После этого в папке folder мы создаем еще одну папку (например, style). Затем в нее мы помещаем файл-CSS (например, style.css), который должен содержать следующий код:

#container{
width: 100%;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7{
display: block;
overflow: hidden;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6{
height: 1px;
}
.xb1{
margin: 0 8px;
background: #7f7f9c;
}
.xb2{
margin: 0 6px;
background: #7f7f9c;
}
.xb3{
margin: 0 4px;
background: #7f7f9c;
}
.xb4{
margin: 0 3px;
background: #7f7f9c;
}
.xb5{
margin: 0 2px;
background: #7f7f9c;
}
.xb6{
margin: 0 2px;
background: #7f7f9c;
}
.xb7{
margin: 0 1px;
background: #7f7f9c;
height: 2px;
}
.content{
display: block;
height: 100px;
background: #7f7f9c;
}
.content p{
font-size: 2.5em;
color: #fc0;
margin: 0 10px;
letter-spacing: 1px;
}
.top_corners{
margin: 0;
padding: 0;
}
.down_corners{
margin: 0;
padding: 0;
}

Теперь мы подробно рассмотрим код файла style.css, т.к. именно тут задаются те параметры свойств, которые в совокупности и дали нам возможность закруглить углы блока.

Начнем со свойств display: block; и overflow: hidden;, которые заданы для блоков "xb1"," xb2",…,"xb7". Эти свойства предназначены для того, чтобы блоки "xb1", "xb2",…,"xb7" выстраивались друг за другом (блочное расположение).

Для каждого блока задан свой цвет (background: #7f7f9c;) и свой отступ при помощи свойства margin.

Разберем свойства блоков "xb1", "xb2",…,"xb7" на примере блока "xb1":

.xb1{

margin: 0 8px; — отступ блока слева и справа в 8 пикселов от блока "container". Значение "0" –это отсуп блока сверху и снизу относительно блока "container" (сверху) и блока "xb2" (снизу);

background: #7f7f9c; — цвет блока.

}

Аналогично и с блоками "xb2","xb3",…,"xb7" (каждый имеет свой отступ). Можно сказать, что свойство margin в данной рассматриваемой теме является ключевым. Но не стоит забывать про свойство height, т.к. именно оно задает высоту блока (для блоков "xb1", "xb2",…,"xb6" она равна 1 пиксель, для "xb7" – 2 пикселя ).

Рассмотрим свойства блока "content". Они такие же, как и у блоков "xb1", "xb2",…,"xb7", но отличие есть только в величине высоты блока (она равна 100 пикселей). При помощи данного свойства мы можем увеличивать и уменьшать высоту блока с закругленными углами (об этом мы поговорим чуть позже).

У блока "container" есть всего лишь одно свойство width. Оно помогает нам задать ширину блока с закругленными углами. Изменения ширины блока за счет данного свойства будут рассмотрены ниже.

Блоки "top_corners" и " down_corners" являются вспомогательными. Функциональной нагрузки не несут. При желании их можно удалить – все останется на своих прежних местах. Они введены для более ясного представления кода.

После того, как выполнены пункты 1 и 2, в окне нашего браузера появился блок с закругленными углами:

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

"Да, блок с закругленными углами есть, но он же растянут на всю ширину окна браузера, да и высота у него не та, что мне нужно", — скажете Вы. Но переживать по этому поводу не стоит. Данный блок можно задавать любой нам необходимой как ширины, так и высоты.

Для этого нам необходимо ознакомиться более подробно с файлом style.css., а именно вот с этими элементами и их свойствами:

#container{
width: 100%;
}
и

.content{
display: block;
height: 100px;
background: #7f7f9c;
}

За ширину создаваемого блока отвечает блок "container".

Как мы можем увидеть, в элементе container задана ширина блока 100% (т.е. блок тянется и располагается на всю ширину экрана браузера). Для ее изменения нам нужно изменить параметр свойства ширины блока width (сейчас он равен у нас 100%). Поставим, к примеру, 600 пикселей:

#container{
width: 600px;
}

После внесения вышеуказанных изменений наш блок стал выглядеть так:

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

Для того чтобы задать нужную высоту блока, необходимо в свойствах блока "content" изменить параметр свойства высоты блока height (сейчас он равен у нас 100px). Зададим высоту блока, равную, например, 300 пикселей:

.content{
display: block;
height: 300px;
background: #7f7f9c; 
}

Теперь наш блок выглядит вот так:

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

Шаг 3

В завершении темы хотел бы поговорить еще об одной немаловажной детали – это радиус закругления угла блока. Как Вы уже поняли, закругленный угол создается именно по средствам наложения одного блока на другой (увидеть это можно на увеличенном изображении левого верхнего угла, а также левого нижнего, которое я приложил выше). Для того чтобы увеличить радиус закругления Вам просто необходимо добавить n блоков "xbn". Каждый новый блок должен иметь совершенно другое значение свойства height и margin от предыдущего. За счет этого и будет достигнут закругленный угол.

Т.о., чем больше у вас используется блоков «xbn», тем больше радиус закругления угла блока.

Также прилагаю подробную карту блоков для того, чтобы было проще во всем ориентироваться:

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

На этом у меня все. Спасибо за внимание.

Заключение

В этом уроке мы научились закруглять углы блоков средствами HTML/CSS. Рассмотрен метод "закругление углов блока при помощи позиционного построения блоков" закругления углов блока. Существуют еще несколько способов закругления углов блока (например, при помощи картинок; средствами CSS3, JS), но их мы рассмотрим уже в следующий раз.

Хотелось бы выделить преимущества и недостатки рассмотренного метода:

- преимущества:
1. Этот метод исключает возможность некорректного отображения web-страницы в браузере, что является явным недостатком метода "закругление углов блока при помощи картинок" (если отключить отображение картинок в окне браузера при использовании "закругление углов блока при помощи картинок", то блок будет отображен некорректно – отсутствие закругленных углов);
2. Понятный и легкий в использовании код;
- недостатки:
1.Нужно использовать много блоков, чтобы создать один с закругленными углами.

С Новым 2011 Годом!

киберсант-вебмастер

Автор: Михаил Влащенко

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (42)

  1. alex

    а как насчет валидации и SEO ??? это допустимо?

  2. Сергей

    В принципе учтено все, код валиден. Вопрос, если делать большой радиус скругления, не появится эффект лесенки? И еще, как IE6 отображает такой способ скругления?

    • Andrey Bernacki

      IE 6 то же корректно отображает. А насчет радиуса скругления — автор конечно не я, но на сколько я разобрался то радиус скругления можно увеличить добавив еще несколько тегов <b> в верхний и нижний скругляющие div-ы. И паддинги подработать немного чтобы смотрелось аккуратно.

    • Михаил В.

      Эффект лесенки не появляется, если правильно позадавать ширину, высоту и отступы блока. Поддержка от IE6+, возможно и IE5, я не тестил.

  3. Евгений

    С Наступающим! Вау! А зачем так сложно теперь то уже? Есть же CSS3 и box-radius. Даже под эксплорер работает, если постараться. Очень удобно и просто закругляет углы, радиус закругления можно настраивать. И тень можно через box-shadow. Рекомендую!

    • Andrey Bernacki

      Спасибо за поздравление, Вас то же с наступающим!
      Все верно, есть уже CSS3, который все это решает тремя строками. Но тут вопрос даже не в том, что CSS 3 поддерживают только последние версии браузеров, которые стоят далеко не у каждого пользователя. Тут дело в том, что сам сколько этим занимаюсь — ни разу про такое не слышал. Вот собственно решил что будет интересно и вам про это почитать. Может какие другие идеи родятся…

      • Never Lex

        Давно есть кроссбраузерный box-radius, благодаря которому извращений в html коде не будет в принципе. Поддерживается даже IE6.

        А это решение возможно интересно, если хочется почитать «как это было». Но использовать на сайте этого не стоит.

        • Webchester

          Never Lex: Полностью с тобой согласен, 1 строка лишнего кода и подключение одного файла, делает такие чудеса, например Ваш IE6 будет знать border-radius, box-shadow, multiple background images, linear-gradient — вот как это можно сделать w-blog.org.ua/?p=1727

          Может автор не знает, что чем меньше размер CSS файла тем быстрее загружаются стили, Ваши 58 срок кода можно превратить в 10 срок, а получиться тоже самое.
          Я лично не рекомендую пользоваться методом автора, очень он устарел.

  4. Станислав

    Очень интересная статья, спасибо!

  5. Михаил

    Как всегда, полезная статья, попробуем повторить.

  6. Борис

    Новогодняя загадка — кто отгадает?
    Сделал я описанные 2 шага. Скопировал тексты в Блокнот. Пришлось только убирать номера строчек.
    Запустил — увидел блок с закругленными краями, но вместо текста — квадратики в броузерах IE и Opera и ромбики с вопросами в Firefox и Chrom.
    Сравнил свой файл и предложенный файл в папке demo по содержанию. Использовал Total Commander 7.02a. Не сравнились только 5 и 14 строки: в моем файле — нормальный текст, а в авторском — «зюки». К чему бы это всё?

    • Валерий

      Новогодняя отгадка — Новогодней загадки!
      Всё дело в кодировке. Если в строке 04. вместо utf-8 написать windows-1251, то всё станет на свои места. Или в браузере изменить кодировку Настройка->Инструменты->Кодировка (в общем изменить кодировку на кириллицу).

      • Борис

        Спасибо, Валера! Все получилось. Можно встречать Новый год с чистой совестью и чувством исполненного долга! Поздравляю тебя и всех читателей этих комментариев с Новогодними праздниками! Желаю новых успехов, новых побед, новой радости, нового, чистого, светлого, пушистого и замечательного счастья.

  7. Дмитрий

    Считаете целесообразно писать 60 строк кода вместо 2-3 строк CSS3? Да еще и забивать головы разным хламом тем, кто пишет: «…интересная статья, полезная…». Может все таки лучше для таких объяснить что так, как в примере делать НЕЛЬЗЯ! Сейчас большинство браузеров понимают и box-radius и box-shadow. А тем, кто только начинает изучать CSS начинайте знакомиться с CSS3 и не забивайте себе головы подобными глупостями.

    • Михаил В.

      Конечно целесообразно! Вы отдаете отчет каждому своему действию. Если где-то что-то пойдет не так, то ваш закругленный угол уже не тот. Вы не бездумно взяли прописали две строки и все (хоть это и проще). Вы хоть как-то мыслите. Вы развиваетесь, а не деградируете.
      «Великий» CSS3 это конечно круто. Им пользуется каждый первый, в том числе и я. Но данная статья не для того, чтобы забивать голову, как вы сказали, а для общего развития.
      ЗЫ: читайте хотя бы заключения или выводы, в них всегда сама суть.
      В заключении данной статьи четко написано, что есть еще другие способы закругления углов блока и они перечислены. Не по душе этот способ, пожалуйста, обратитесь к другому, более легкому.

  8. Леонид

    Спасибо за статью. Очень полезная информация.
    С Наступающим всех Новым Годом!

  9. Never Lex

    Адский изврат из прошлого века.

  10. Андрей

    Полезный способ, видел его описание несколько раз на разных порталах — спасибо что написали эту статью здесь , но по моему мнению -в этом способе слишком много кода.
    Если идет речь о блоке с радиусом закругления углов 10-15px , то смотрится неплохо , но если радиусы закруглений больше 15px приходится добавлять еще Огромное количество блоков, чтобы закругления казались плавными.
    И еще :
    » Этот метод исключает возможность некорректного отображения web-страницы в браузере, что является явным недостатком метода «закругление углов блока при помощи картинок» (если отключить отображение картинок в окне браузера при использовании «закругление углов блока при помощи картинок», то блок будет отображен некорректно – отсутствие закругленных углов); »
    Мне кажется, если картинка заданна как Фоновая (через CSS), то браузер при отключении (в настройках отображения страницы) картинок все равно отображает фоновые рисунки , или я ошибаюсь?
    PS: Мб я приверженец больше работы с графикой чем с версткой , но я не встречал браузеров способных отключить отображение абсолютно всей графики на странице, да и если даже это возможно , то зачем? Ушло время 56кб модемов как страшный сон ; я сам из глубинки , но в нынешнее время скорость интернета по всей России достойная любого мыслимого серфинга по сайтам и функциями «облегчения страниц » уже просто никто не пользуется.

  11. Станислав

    .Статья интересная.Спасибо за поздравлнние. Вас тоже с Новым годом! Творческих успехов Вам!

  12. Максим

    Полезно для общего развития, объяснено доходчиво. Но использовать на своем (а тем более клиентском) сайте очень не советую. Готов поспорить с утверждением, что это «понятный и простой в использовании код». К одному блоку нужно подстроить 7 блоков сверху и 7 снизу. А если таких «обстраиваемых» блоков на странице 4 (8, 16…)? Код обрастает горой несемантического «мусора», объем файла растет. Зачем? Человек отключил картинки, ему не надо «красивостей» — давайте уважать его желание! А хочешь «красиво» — не отключай картинки и любуйся скругленными углами.
    Знать это, конечно, надо. Рекомендую даже сделать в качестве упражнения. Увидите, в какую свалку ваш код превратится.

    • Михаил В.

      Абсолютно верно подмечено, Максим. Применить данный способ, если на странице есть хотя бы уже два блока, не очень гуманно (не говорю, если их 5 и более). Со стороны семантики это просто недопустимо. Урок для общего развития.

  13. Irina

    Спасибо, все поятно.

  14. Сэм

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

  15. Сергей

    Большое спасибо за статью. Будем пробовать.
    И поздравляю Вас и Ваших читателей с Новым годом и желаю успехов!

  16. taika

    это ужас конечно.. лучше так людей не сбивать с толку
    С новым годом!

  17. viewmind

    Webformyself! Поздравляю команду сайта с Новым годом! Спасибо за статьи и активное участие в интернете! Ваши оппоненты (как правило, без предметных аргументов) — самая лучшая реклама ваших статей. И вообще — лучший способ не получить по голове — не высовываться. Но это уже вне главного принципа интернета…

  18. naikom

    Слишком сложно.. сейчас уже итак все современные браузеры поддерживают скругление.. Но если давиться для тех 5%, которые пользуються ие6, то лучше и проще сделать это картинкой-сниппетом..

  19. Кузьмич

    Имхо, это полнейшая ерунда. Большинство современных браузеров поддерживают CSS3, а там уже есть свойство закругления углов. Для ИЕ, я так работать не собираюсь. Это ужасно не структурировано и ужасно неудобно.
    Нет уж, извольте.

  20. Almaz

    Здравствуйте уважаемые Андрей Бернацкий, Рог Виктор и команда, Поздравляю Вас С Новым 2011 Годом!
    Желаю вам всего хорошего в Товым Году!
    Ребятя, Счастья Вам и Успехи!
    Я очень слежу за вашими статьями и советами, большое спасибо!
    Пока разбираю что к чему
    Алмаз

  21. Михаил В.

    Всем привет!
    Я автор данной статьи.
    Прочитав комментарии, заметил, что большенство из них несут характер отрицательного типа. Быстрее всего это вызвано тем, что Вы видите данный метод впервые. Если Вы внимательно прочитает статью, а именно заключение, то увидете, что это не единственный способ закругления углов блока и я не настаиваю на его использовании (в нем выделены как преимущества, так и недостатки). Просто пытаюсь донести до Вас, что есть еще методы, который могут разрешить данную поставленную задачу. Данный метод представлен для Вашего всеобщего развития!
    Понятно всем, что каждый для себя выбрал определенный способ закругления углов и использует только его, другие ему неприемлемы и кажутся чужими. Это тоже самое, что болеть за Англию, когда Вы фанат Испании, при том, что матч Англия — Испания. Как говорится: «На вкус и цвет товарищей нет!».
    Для тех, кому данная статья пришлась по вкусу, если возникнут вопросы, пишите, рад буду обсудить.
    По поводу критики, куда же без нее! Это как Добро и Зло…
    Всем спасибо за внимание. Желаю не останавливаться на достигнутом, творческих Вам успехов.

  22. Ирена

    Спасибо, Миша, пиши следующую про скругление с помощью картинок, средствами CCS3 и JS.
    Очень ждем!!!

  23. Игорь

    Мама родная! «фиолетовенький с переподвыподвертом»??! Зачем так громоздить? Можно ведь на много проще добиться подобного эфекта. Причем способ универсальный и «масштабируемый» легко.

    Достигается подобный эффект использованием CSS свойства border-radius, с помощью которого можно создавать HTML элементы без единой картинки.

    .round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    }

    Хотя большинство современных браузеров уже поддерживают HTML5, но Internet Explorer надо заставить воспринимать новую версию разметки, для этого нужно подключить небольшой скрипт:

    В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.
    Далее, используем следующий скрипт:

    DD_roundies.addRule(‘.round’, ’10px’);

    В данном случае все HTML элементы с классом round будут с закруглёнными углами. Подробнее читайте на домашней страничке скрипта: dillerdesign.com/experiment/DD_roundies/ (англ.) Там же можно его скачать.

    По мотивам: web2.0blog.ru

    • Игорь

      Блин, некоторые вещи не отобразились:

      Хотя большинство современных браузеров уже поддерживают HTML5, но Internet Explorer надо заставить воспринимать новую версию разметки, для этого нужно подключить небольшой скрипт:

      В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.
      Далее, используем следующий скрипт:

      DD_roundies . addRule ( ‘ . round ‘ , ‘ 10px ‘ ) ;

  24. Михаил В.

    Конечно можно, никто ж не спорит.:)

    • Игорь

      Упс, прошу пардона. Я последние строки статьи то и не прочитал.
      Способов то конечно достаточно, только я за то, чтобы давать «начинающему разработчику» сразу самый не объемный и в то же время универсальный способ. Ведь если кто то потратит уйму усилий, чтобы добиться нужного эффекта вышеописанным способом, врятли уже будет что то переделывать, когда найдет более универсальный метод.

  25. fr33z3

    Не хочу со своим самоваром в чужой огород, но у меня помоему немножко удобнее сделано с помощью собственного jQuery плагина. Если честно, то нуждаюсь в тестинге.

  26. Елена

    Чё-то не могу скачать исходники. То пишет, не найден файл, то вместо исходников — демо

  27. Vyacheslav

    Автор:-»Заключение
    ….Существуют еще несколько способов закругления углов блока…….»
    Один из них, с помощью CSS3, то о чём говорилось выше:
    Данный блок закруглен без использования картинок
    в CSS:
    #content{
    Width:100%;
    Height:100px;
    background:#7f7f9c;
    font-size: 2.5em;
    color: #fc0;
    margin: 0 10px;
    letter-spacing: 1px;
    border-radius:6px;-//округление углов, чем больше значение, тем сильнее закругление углов
    -webkit-border-radius:6px;-//для браузеров Google Chrome и Safari
    -moz-border-radius:5px;-//для Firefox
    -khtml-border-radius:10px;-//это для Linux
    }
    Всё!
    Не знаю как в ранних, в IE9 работает.

  28. Anatoliy

    Пробывал с помощью PIE получилось!

  29. Иван Васильевич

    небольшие 5 копеек по теме закругления углов: finego.ru/tools/border-radius-generator

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree