. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :

-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

1. Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // "?" указывать данное значение необязательно

• Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
• Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
• Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
• Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

Например:

border-radius: 1em 3em 2em;

эквивалентно:

border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;

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

Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.

1. Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

Например:

border-radius: 2em 1em 4em / 0.5em 3em;

эквивалентно:

border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

Общая информация и примечания

Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:

Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

Но иногда цвет фона элемента может «просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

Element { border-radius: 30px; background-clip: padding-box; }

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

Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:

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

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

Element { background: black; color: white; border-radius: 1em; padding: 1em; }

Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

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

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

Если высота и ширина элемента не равны, мы получим эллиптическую форму:

Элемент с радиусом границы 50%, высота и ширина которого не равны.

Официальный синтаксис

Синтаксис:

border-radius: [<длина> | <проценты>] {1,4} {1,4}]?

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

Значения

Неофициальный синтаксис webkit border radius CSS :

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.

border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;

Демо-версия

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-radius: 0 ; }

Пример

Результат даного прикладупоказано на рис. 2.

Мал. 2. Радіуси заокруглення

Об'єктна модель

Об'єкт.style.borderRadius

Примітка

Chrome до версії 4.0, Safari до версії 5.0 та Android до версії 2.1 використовують властивість -webkit-border-radius.

Firefox до версії 4.0 використовує властивість -moz-border-radius.

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
• Candidate Recommendation ( Можлива рекомендація ) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
• Draft ( Чернетка специфікації) – перша чорнова версія стандарту.

×

Я впевнений, що ви вже знайомі з css властивістю border. Чи дізнаєтесь ви щось нове, чого не знали раніше про css border? Що ж, не тільки дізнаєтесь, а й побачите кілька нових речей, яких ви ніколи не знали раніше!

Не тільки CSS3 можна використовувати для закруглення куточків, але й чистий CSS-код підійде для створення складних форм. Раніше ви могли використовувати background-image для створення враження закруглених куточків. Завдяки новим технікам використання border, ми можемо зробити це на чистому css коді.

Основи використання css border

Напевно, ви вже ознайомлені зі стандартним використанням borderвластивості:

Border: 1px solid black;

Код вище, виведе рамку у 1px, яка буде чорного кольору. Легко і просто. Також можна трохи розширити синтаксис:

Border-width: thick; border-style: solid; border-color: black;

Як додаток можна використовувати специфічні значення властивості border-width, три ключових слова: thin, medium, thick.

Але використання розширеного синтаксису який завжди практично. Давайте розглянемо приклад, коли потрібно змінити колір рамки блоку при наведенні миші. У такому разі використання скороченого синтаксису набагато простіше:

Box ( border: 1px solid red; ) .box:hover ( border: 1px solid green; )

Елегантніше і простіше можна зробити наступним чином:

Box ( border: 1px solid red; ) .box:hover ( border-color: green; )

Як бачите, розширена техніка також корисна, коли ми змінюємо лише деякі властивості: width, style, color та інші.

Border-Radius

Border-radius- це "золота" властивість CSS3 - перша, найбільш поширена властивість, яка стала практичною і корисною. Виключаючи IE8 та версії нижче, всі браузери відображають закруглені куточки за допомогою цього.

Хоча, необхідно використовувати спеціальні префікси для Webkit та Mozilla, щоб стилізація була коректною.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

В даний час, ми можемо прибрати спеціальні префікси, і використовувати стандартну форму border-radius.

Ще один привілей у тому, що ми можемо використовувати спеціальні значення для кожної із сторін блоку:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

У коді вище, встановлюючи border-top-right-radius та border-bottom-left-radius на «нуль», можна досягти дивовижних форм. Хоча елемент може успадковувати деякі властивості, які потрібно обнулити.

На кшталт margin і padding, ми можемо стиснути синтаксис:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Як приклад застосування властивості border-radius покажу вам «лимон», який часто використовують дизайнери при верстці сайтів:

Lemon ( width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; )

Ідемо далі основ

У багатьох дизайнерів всі пізнання, в області css властивості Border, на цьому закінчуються. Але існує ще кілька крутих штук, за допомогою яких можна створити чудові речі!

Складні структури css border

Існує безліч технік для створення дизайну із застосуванням складних структур Border. Наприклад, розберемо такі…

Border-Style

Ми завжди використовуємо найбільш відомі властивості solid, dashed та dotted. Але існує кілька інших властивостей border-style: groove і ridge.

Border: 20px groove #e3e3e3;

Або в розширеному синтаксисі:

Border-color: #e3e3e3; border-width: 20px; border-style: groove;

Хоча ці властивості корисні, але вони є основою створення складних рамок.

Outline

Найбільш популярна техніка створення подвійної рамки – використання властивості outline.

Box ( border: 5px solid #292929; outline: 5px solid #e3e3e3; )

Цей спосіб працює відмінно, хоча він нас обмежує тільки двома рамками. Іноді буває потрібно створити градієнтний border, який складається з багатьох верств… як тоді?

Псевдоелементи

Коли техніки outline мало, альтернативним засобомє використання псевдо елементів:before та:after. За допомогою яких можна додати додаткові рамкидо елемента:

Box ( width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; ) /* Create 2 boxes with same width of container */ .box:after, .box:before ( content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; ) .box:after ( border: 5px solid red; : 10px solid blue;

На вигляд не дуже елегантно, але по Крайній мірі, це працює. Трохи проблемно розібратися з послідовністю кольорів у межах… але зрозуміти можна.

Box-Shadow

Цікавим «дитячим способом» створення подібного ефекту є використання CSS3 властивості box-shadow:

Box ( border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; )

У цьому випадку ми були розумнішими, використовували спеціально призначену властивість box-shadow. Змінюючи параметри x, y, blur на нуль, ми можемо використовувати різні кольори для створення безлічі рамок.

Але є проблемка, в старих браузерах, які не розуміють властивості box-shadow, буде видно лише одну червону рамку в 5px.

«Пам'ятайте! Дизайн сайту має виглядати кроссбраузерно, тобто однаково у всіх браузерах. Включаючи старі версії.

Змінюємо кути

На додаток до використовуваного простого значення border-radius, ми можемо вказати два окремі - розділяючи їх через / ми вкажемо горизонтальний і вертикальний радіус.

Для прикладу:

Border-radius: 50px/100px; /* horizontal radius, vertical radius */

… це рівносильно:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Ця техніка підходить для створення унікальних формблоків. Наприклад, ось створення ефекту загорнутого паперу:

Box ( width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )

CSS форми, з використанням border

Ця техніка показує, як можна створювати css форми, при цьому використовувати елементи з нульовими розмірамивисоти та ширини. Здивовані? Давайте подивимося на прикладі…

Для наступних кількох прикладів ми будемо використовувати наступну розмітку:

…і наступний базовий стиль:

Box ( width: 200px; height: 200px; background: black; )

Найбільш частий приклад використання CSSформ - створення обтічної стрілки. Секрет цієї стрілки криється в створення borderз різними кольорами для кожної із сторін. Потім ставимо атрибути width і height на 0.

Призначимо до div блокуклас arrow:

Arrow ( width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; )

Щоб продемонструвати, спочатку ми використовуємо розширений синтаксис. Далі ми можемо забрати зайвий код, використовуючи скорочений синтаксис:

Arrow ( width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; )

Цікаво, чи не так? Тепер ми встановимо прозорі кольорина всі боки, крім блакитної сторони.

Arrow ( width: 0; height: 0; border: 100px solid; border-bottom-color: blue; )

Чудово вийшло! Але це суперечить семантичній верстці, створювати.arrow div, тільки для того, щоб додати стрілку на сторінку. Для цієї мети ми можемо використовувати псевдоелементи, що ми зараз і зробимо.

Створюємо Speech Bubble

Для створення Speech Bubble («Мовленевого хмари»), нам знадобиться невеликий шматочок чистого CSSкоду та один div блок.

Speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; )

Speech-bubble:after (content: ""; )

На цьому етапі ми створимо стрілочку, яку робили раніше, додамо до елемента і залишається лише позиціонувати:

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )

Якщо ми хочемо, щоб стрілочка була спрямована вниз, нам доведеться встановити все border прозорими, крім верхнього.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )

Коли ми створюємо цю CSS форму, ми можемо конкретно вказати розмір стрілочки. Натомість ми можемо встановити властивість border-width, яка призначатиме розмір для стрілочки. Також ми встановимо позицію стрілочки внизу посередині. Відповідно для цього використовуємо значення top та left.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )

Крім цього, нам залишається надати колір, такий самий як у блоку. Пам'ятайте, що при позиціонуванні, потрібно враховувати розмір інших border, які невидимі (15px). Також додамо блоку заокруглення по кутах.

Speech-bubble ( /* … інші styles */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top -color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ )

Не погано, га? Використовуючи декілька css класіві хитрощі border можна створити таку штуку.

/* Speech Bubbles Usage: застосуйте клас.speech-bubble і.speech-bubble-НАПРЯМ, як показано нижче

*/ .speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border- radius: 10px; font-family: sans-serif; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; ) /* Position the Arrow .speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; left: 100%; top: 50%; margin-top: -15px; ) .speech-bubble-bottom:after ( border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; top: 50%; right: 100%;

Бонус! Вертикальне центрування всередині блоку

Для одного рядка тексту можна використовувати line-height. Але якщо у вас два або більше текстових рядків… Найкращим рішеннямбуде встановити display властивість на table, і помістити весь текст у параграф. Ось як це виглядає на html розмітці: