Как закруглить углы без использования графики

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

За пример возьмем теперь не таблицу, а слой, хотя и с таблицей можно сделать тоже самое.

Для ясности посмотрите на увеличенный угол слоя:

На самом деле мы будем использовать два слоя (окрашены в серый и черный цвета) и 7 блоков (цветные).

Для начала создайте слой в который вложите еще один в нем будет текст

<div id=”radius”>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

Создайте таблицу стилей и задайте для слоев следующие параметры:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }

Теперь над слоем text будем создавать шапку из блоков толщиной в 1 пиксель. Всего будет 7 блоков, можно использовать любое количество это зависит от радиуса закругления. Для создания блока можно использовать тег <div> или любой другой, но как правило используют устаревший тег <b>. Создадим первый блок:

<div id=”radius”>
<b class=”r1″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

В таблицу стилей пропишите  параметры для нового блока:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }

Для блока мы задали отступы по 10 пикселей слева и справа, для следующих блоков эти параметры будут уменьшаться, закругляя таким образом угол:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }

Теперь добавим блоки в html-страницу:

<div id=”radius”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
<b class=”r5″></b>
<b class=”r6″></b>
<b class=”r6″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

6-й и 7-й блоки повторяются для более мягкого закругления угла. Теперь осталось скопировать блоки и вставить их в обратном порядке под слоем text и получим вот такой слой:

Можно поэкспериментировать и получить вот такое интересное меню:

Создавать интересные css-меню с закругленными или скошенными углами можно до бесконечности: