38 статей про створення закруглені кути на сайтах за допомогою css

Без використання порожніх тегів

Простий, семантично правильний CSS блок з чистим кодом

Створює блок і додає можливість створення заголовка блоку. Тягнеться по ширині і висоті. Незважаючи на тінь на прикладі, реалізації напівпрозорої тіні не передбачено.

Круглі кути в CSS

Дуже приємний зовнішній вигляд, проста реалізація, мала кількість HTML-елементів. До мінусів, мабуть, можна віднести тільки наявність 4 картинок для кожного з кутів. Але на жаль не працює в IE.

CSS тизер-блок

Передбачена реалізація як одно- так і двох-картіночного методу. Мала кількість HTML-елементів. Дуже зручно для створення тізерів.

Посилання на останні новини

Дуже цікаве рішення на основі неупорядкованого списку. Плюсом буде проста реалізація і мала кількість HTML-елементів. Приємне оформлення з функцією зміни кольору при наведенні мишкою (але ця приємність не працює в IE).

CSS і круглі кути: Кордони з дугами

Незаперечним мінусом є наявність 8 Дівов для реалізації. Так само в статті є опис іншого методу, в якому використовується в 2 рази менше Дівов, але блок залитий кольором.

Озаглавлені зверху кути

Реалізовано на основі списків визначень. Досить гарне оформлення, можливість створення заголовка. Відсутня підтримка зміни ширини. Але є зручна можливість швидкої зміни кольору заголовків і самого блоку.

Створення округленій блоку або дизайн з CSS і XHTML

Як і в попередньому способі все реалізовано на основі списку визначень. У статті розглянуто два способи реалізації. Так само з'явилася можливість тягнеться ширини.

Гумовий блок з легко змінюваними кутами і поверхнею

Мінусами в цьому способі так само є велика кількість Дівов (5) і 4 файлів картинок. Але є цікаві приклади для реалізації.

Закруглені кути бордера

Чи не є повним уроком, але показує принцип використання одиничного бордера і картинки.

Круглі кута в CSS

Досить приємний урок. Його мінусом, мабуть, є відносно велика кількість HTML-елементів і наявність 4 картинок для кожного з кутів.

Створення довільних кутів і кордонів

Використовується 4 файлу з картинками (максимальна ширина блоку залежить від ширини картинки). Але дуже докладний урок.

«Куленепробивні» круглі кути

Дуже докладна стаття з великою кількістю прикладів. Але досить складна реалізація. До того ж використовується 4 картинки.

Малювання тіней і рамок елементів оформлення

Стаття Володимира Токмакова. Вельми складна реалізація, але до плюсів, звичайно, відноситься можливість створення напівпрозорих тіней. Стаття російською.

Круглі кути з фіксованою шириною

Цікавий приклад використання. Але мінус у фіксованій ширині даного способу. Плюс - дуже проста реалізація.

CSS тягнеться блок з 4 довільними кутами

Цілком хороший урок. Можливість відкидання тіней. Плюс - можливість створення заголовків.

Робимо закруглені куточки за допомогою псевдоелементів: before та: after

Стаття вже була описана на Хабре. Дуже проста реалізація, але не всі приклади, наведені в статті, працюю в IE. Використовується 4 файлу з картинками для реалізації. Стаття російською.

Створення довільних кутів і кордонів. частина II

Описується спосіб при якому фон не суцільний, а градієнтний. Використовується 4 картинки.

Круглі кути в DIVах

Описано 3 способи реалізації. Таблицями, дивами і дивами без картинок. Останній варіант не дуже хороший, тому що використовується багато порожніх тегів.

Круглі кути і блоки з тінню

Мабуть, не дуже добрий спосіб, так як використовується 5 картинок. Але начебто передбачена можливість створення тіні. Плюс - використання тільки двох HTML-елементом.

Цікава верстка

Стаття на Хабре, в якій хабражітелі намагаються запропонувати свої варіанти вирішення. Стаття російською.

Використовують порожні теги

Ще більше круглих кутів з CSS

Приємна на зовнішній вигляд техніка, але шкода, що немає реалізації PNG під IE.

CSS гумові круглі кути

Використовує по два порожніх тега на верх і низ блоку. До мінусів відноситься 6 картинок для реалізації.

CSS: Розумні кути

Використовує один порожній для верху і два для низу. Цілком приємна реалізація.

Як зробити тягнуться по ширині divи з круглими краями

Начебто і з PNG, але знову ж таки в IE не працює. Як плюсів можна назвати урок з малювання круглих країв

Тягнуться круглі кути

Велика докладна стаття з великою кількістю картинок. Але на кожен кут по диву, плюс див для контенту.

Закруглення кутів без використання зображень

Спосіб безкартіночного створення закруглені кути. Але багато порожніх елементів <B> (спосіб, аналогічний блокам GMail).

використовують JavaScript

подання DomCorners

У статті є кілька варіацій на тему кількості використовуваних зображень. Мінус у використанні порожніх тегів.

Прозорі довільні кути і межі. версія 2

Наочний приклад використання. Гарне оформлення. Відкидання напівпрозорих тіней, але тіні не працюють в IE.

Nifty кути зі згладжуванням

У своєму роді є додавання до скрипту Nifty Corners. Чи не використовує зображень. Можна змінювати радіус заокруглення як по осі X так і по Y.

Круглі кути

Дуже проста реалізація, всього один елемент div. Так само в коментарях багато доповнень.

http://www.curvycorners.net

Окремий сайт присвячений круглим кутах. Красиві приклади використання. Дуже проста реалізація і багато можливостей налаштування.

Nifty Corners Cube

Дуже популярний скрипт, що дозволяє створити круглі кути без зображень. Дуже багато варіантів реалізації.

RUZEE.Borders - круглі кути за допомогою яваскрипт

Досить велика кількість можливостей. Так само заснований на Nifty. Можливість створювати тінь, але не працює в IE.

jQuery скругление

Мабуть найбільший вибір усіляких кутів. Мала кількість HTML-елементів для реалізації.

Генератори круглих країв

RoundedCornr

Велика кількість можливостей. Генерує 4 типи блоків, в тому числі і кнопки. Єдиний мінус в наявність порожніх тегів в генерованому коді.

Spiffy Corners

Дуже простий генератор. Але генерує дуже велика кількість елементів <B> .

Spanky Corners 1.1

Простий генератор з хорошим HTML-кодів, плюс генерує окремий css-файл для IE.

Spiffy Box

Генерує одну png-картинку з заданими параметрами. До плюсів можна віднести простий HTML-код. Так само в статті є посилання на урок, за яким створено генерований код.