Закругление углов блока DIV только с помощью CSS

Вроде тема уже давно обмусолена на многих форумах и блогах, но такая ее распространенность только мешает в этом вопросе.

Все само собой разрешиться с приходом HTML5 и CSS3, но так как этот процесс перманентный и ждать его в ближайшие годы нам не приходится. Точнее уже практически все современные браузеры поддерживают CSS3, но по статистике очень большая доля посетителей мировых сайтов приходится не старые версии браузеров. А нам веб-разработчикам приходится с этим мириться и учитывать при каждой новой разработке.

Я для себя нашел, по моему мнению, самое элегантное решение для скругления углов блока, о чем и хотелось бы рассказать.

Помимо того, что необходимо скругления углов блоков DIV, нужно еще как-то скруглять изображения, что немного усложняет задачу.

Но как оказывается, это не большая беда.

Основная идея, которую я использую для скругления углов – это возможности CSS-параметра border-radius, который позволяет скруглять углы. Те браузеры, которое это понимают, работают с ним без проблем. А старинные браузеры, как говно мамонтов (всеми любимы Internet Explorer и несвежие версии других браузеров), необходимо просто обучить этому параметру CSS.

Есть такой парень Remiz Rahnas, разработавший скрипт border-radius.htc, который помогает выйти из сложившейся проблемы. Скачать его можно либо на оф. сайте (ссылка приведена выше) или с моего блога. Файл border-radius.htc весит чуть меньше 5 Кб и в объемах современных сайтов просто потеряется.

Чтобы начать использовать, Вам необходимо:

  1. Скачать файл order-radius.htc;
  2. Поместить его на свой сайт (я размещаю в директории /CSS);
  3. В файле CSS стилей, необходимо указать
    body {
    	behavior: url('/css/border-radius.htc');
    	}
    .round {
    	height: 100px;
    	width: 100px;
    	-moz-border-radius: 20px 10px 5px 0;
    	-webkit-border-radius: 20px 10px 5px 0;
    	border-radius: 20px 10px 5px 0;
    	}
  4. Теперь стандартным образом выводит div и наблюдаем красивые и ровные закругления, без какой-либо заморочки на доп. изображения.

Выглядит это вот так:

Дополнения

Я думаю, что не трудно догадаться о том, что у CSS-параметров -moz-border-radius, -webkit-border-radius и border-radius 4 значения – это радиусы закругления левого верхнего, правого верхнего, правого нижнего и левого нижнего края.

P.S. Я надеюсь, что со временем, все браузеры будут понимать эти параметры и нам не придется забивать костыли в Internet Explorer, делая его пригодным для нормального использования. Но пока это далеко от сегодняшней действительности.

P.S.S. На этой недели уже началась религиозная истерия по всем фронтам. Сначала православные, потом мусульмане и в завершении айфонофилы. Я хоть и являюсь обладателем Apple iPhone 16Gb белый еще 3GS и никак не могу взять в толк, зачем его менять на 5-ую версию. Мне нравится мой 3GS тем, что это реально законченный инструмент, которым мне просто удобно пользоваться.

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

  1. Сергей опубликовал комментарий 17 Декабрь 2012, 15:15 #

    а как же IE

    | Ответить
Имя
e-mail
Сайт
Текст комментария: