Двойная рамка с использованием CSS.

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

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

Разноцветные рамки

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

Пример 1. Создание рамки

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании:hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

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

Рис. 3. Рамки, созданные свойством box-shadow

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.

• border-style - стиль границы.
• border-width - ширина границы.
• border-color - цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

1. none - граница отсутствует (по умолчанию).
2. solid - сплошная граница.
3. double - двойная граница.
4. dashed - пунктирная граница.
5. dotted - граница из ряда точек.
6. ridge - граница "гребень".
7. groove - граница "бороздка".
8. inset - вдавленная граница.
9. outset - выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница "бороздка" (groove)

граница "гребень" (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) - стиль границы установлен для всех сторон блока.

Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.

Свойство border-width. Толщина границы.

Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Код примера:

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

• thin - тонкая граница;
• medium - средняя толщина;
• thick - толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:

• Шестнадцатеричная запись (#ff00aa ) цвета.
• Формат RGB - rgb(255,12,110) . Формат RGBA для CSS3.
• Форматы HSL и HSLA для CSS3.
• Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка значений для сторон отдельно

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

• border-top (верхняя граница)
• border-right (правая граница)
• border-bottom (нижняя граница)
• border-left (левая граница)

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

Параметры верхней границы (border-top ).

• border-top-color - задаёт цвет верхней границы элемента.
• border-top-width - задаёт толщину верхней границы элемента.
• border-top-style - задаёт стиль верхней границы элемента.

Параметры правой границы (border-right ).

• border-right-color - задаёт цвет правой границы элемента.
• border-right-width - задаёт толщину правой границы элемента.
• border-right-style - задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom ).

• border-bottom-color - задаёт цвет нижней границы элемента.
• border-bottom-width - задаёт толщину нижней границы элемента.
• border-bottom-style - задаёт стиль нижней границы элемента.

Параметры левой границы (border-left ).

• border-left-color - задаёт цвет левой границы элемента.
• border-left-width - задаёт толщину левой границы элемента.
• border-left-style - задаёт стиль левой границы элемента.

Пример использования этих свойств:

Свойство border-radius. Округление углов границы.

Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

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

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

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

Рамки - это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались - рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border - только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline .

border-width

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

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

Border-width: 16px 12px 4px 8px;

border-style

Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style .

Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.

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

border-style: solid double dotted none

border-color

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

Border-color: #C85EFA;

border

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

P { border: 2px solid green; }

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

• border-top - верхняя граница.
• border-right - правая.
• border-bottom - нижняя.
• border-left - левая.

P { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width , только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width . Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.

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

Закруглённые углы и рамки-изображения

1. Закругление углов с помощью border-radius

Поддержка браузерами

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса . Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .

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

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

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

Варианты

Div {width: 100px; height: 100px; border: 5px solid;} .r1 {border-radius: 0 0 20px 20px;} .r2 {border-radius: 0 10px 20px;} .r3 {border-radius: 10px 20px;} .r4 {border-radius: 10px/20px;} .r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;} .r6 {border-radius: 10px 20px 30px 40px/30px;} .r7 {border-radius: 50%;} .r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;} .r9 {border-bottom-left-radius: 100px;} .r10 {border-radius: 0 100%;} .r11 {border-radius: 0 50% 50% 50%;} .r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
Рис. 1. Примеры различных вариантов закругления углов блока

2. Рамки-изображения border-image

Поддержка браузерами

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} .

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

/* Пример 1 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: stretch; } /* Пример 2 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: round; }
Рис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice .

2.1. Ширина рамки-изображения border-image-width

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

border-image-width
Значения:
длина	Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число	Числовое значение, на которое умножается значение border-width .
%	Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
auto	Соответствует значению border-image-slice .
initial
inherit

Синтаксис

Div {border-image-width: 30px;} Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

Синтаксис

Div {border-image-source: url(border.png);}

2.3. Элементы рамки-изображения border-image-slice

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

Значения:
число	Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений. Одно значение устанавливает границы одинакового размера для каждой стороны элемента. Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой. Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы. Четыре значения: определяет размеры верхней, правой, нижней и левой границы. Числовое значение представляет количество px .
%	Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
fill	Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

Синтаксис

Div {border-image-slice: 50 20;}
Рис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.

Синтаксис

Div {border-image-repeat: repeat;} Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображения border-image-outset

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

Синтаксис

Div {border-image-outset: 10px;}
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Смещение внешней рамки outline-offset

Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline .

/*Рисунок 1:*/ img { border: 1px solid pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 2:*/ img { border-width: 1px 10px; border-style: solid; border-color: pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 3:*/ img { border: 3px inset pink; outline: 1px dashed grey; outline-offset: 1px; }
Рис. 7. Пример оформления изображения внешней рамкой

4. Градиентная рамка

Значением border-image может выступать не только изображение, но и градиентная заливка.

Полупрозрачная рамка

В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .

* {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; background: #00E4F6; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%); border-image-slice: 1; }

Почтовый конверт

* {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px); }

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

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

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

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая - 4px: */ border-width: 2px 4px; /* верхняя граница - 2px, левая и правая - 6px, нижняя - 3px: */ border-width: 2px 6px 3px; /* верхняя граница - 2px, правая - 3px, нижняя - 4px, левая - 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

• thin - граница шириной 2px;
• medium - граница шириной 4px;
• thick - граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB - зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

Border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

Border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную - существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

• solid - сплошная граница;
• dotted - граница из точек;
• dashed - пунктирная граница;
• double - двойная граница;
• groove - объемная граница-выемка;
• ridge - объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
• outset - выдавленная граница;
• inset - вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль - например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую - двойными. Здесь уже все зависит лишь от фантазии.

Border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

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

Border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

• border-top - стиль для верхней границы;
• border-right - для правой границы;
• border-bottom - для нижней границы;
• border-left - для левой границы.

border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Итоги

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

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

Div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Но это слишком длинная запись. Всё это можно записать короче:

Div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }

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

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

• Верхнюю и нижнюю границы сделайте сплошнымиsolid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
• Левую границу сделайте пунктирнойdashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
• Правую границу сделайте двойнойdouble , шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)