Компьютеры

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

Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border , при этом если указано border: 0 , то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background , отображается под рамкой.

Синтаксис

Border-image: none | [ <адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Обозначения

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

Значения

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

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

Рис. 1. Изображение для создания рамки

<число>

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

Рис. 2. Деление исходного изображения на области

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

<проценты> Аналогично <числу> , но значения задаются в процентах. Тот или другой параметр обязателен. <толщина> Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис. stretch Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию. repeat Повторяет рисунок границы. round Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на рис. 3.


		round

Рис. 3. Результат использования параметров stretch, repeat и round

Пример

border-image

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

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

Рис. 4. Вид рамки

Объектная модель

Объект .style.borderImage

Примечание

Firefox до версии 15.0 поддерживает свойство -moz-border-image .

Safari до версии 6.0, Chrome до версии 15.0, Android до версии 4.4 поддерживают свойство -webkit-border-image .

Opera до версии 15.0 поддерживает свойство -o-border-image .

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

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

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

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

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Upd: В Firefox работают начиная с 29-й версии .

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

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

Возможные значения:

<проценты> - рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты. <числа> - пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill - ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

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

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

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

Возможные значения: stretch - растягивает заполняющий участок картинки. Значение по умолчанию; repeat - повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round - заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space - действует похоже на repeat . Разницы не обнаружила.

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

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример .

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: <длина> - значения в px или em; <%> - значения в процентах относительно размера изображения; <числа> - числовое значение, на которое умножается border-width auto - ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: <длина> - значения в px или em; <числа> - числовое значение, на которое умножается border-width .

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.

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

Атрибуты стиля border-left-width, border-top-width, border-right-width и border-bottom-width задают толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|

border-bottom-width: thin|medium|thick|<толщина>|inherit

Мы можем указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая). В последнем случае реальная толщина рамки зависит от Web-обозревателя. Значение толщины по умолчанию также зависит от Web-обозревателя, поэтому ее всегда лучше устанавливать явно.

В листинге 11.2 мы указали толщину рамки у ячеек таблицы, равную одному пикселу.

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

H1 { border-bottom-width: 5px }

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

Атрибут стиля border-width позволяет указать значения толщины сразу для всех сторон рамки:

border-width: <толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Если указано одно значение, оно задаст толщину всех сторон рамки.

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

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

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

Пример:

TD, TH { border-width: thin }

Атрибуты стиля border-left-color, border-top-color, border-right-color и border-bottom-color задают цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

Значение transparent задает "прозрачный" цвет, сквозь который будет "просвечивать" фон родительского элемента.

ВНИМАНИЕ!

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

Пример:

H1 { border-bottom-width: 5px
border-bottom-color: red }

Атрибут стиля border-color позволяет указать цвет сразу для всех сторон рамки:

border-color: <цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Он ведет себя так же, как и аналогичный атрибут стиля border-width:

TD, TH { border-width: thin;
border-color: black }

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки :

border-left-style|border-top-style|border-right-style|

ridge|inset|outset|inherit

Здесь доступны следующие значения:

None и hidden - рамка отсутствует (обычное поведение);

Dotted - пунктирная линия;

Dashed - штриховая линия;

Solid - сплошная линия;

Double - двойная линия;

Groove - "вдавленная" трехмерная линия;

Ridge - "выпуклая" трехмерная линия;

Inset - трехмерная "выпуклость";

Outset - трехмерное "углубление".

Пример:

H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }

Атрибут стиля border-style позволяет указать стиль сразу для всех сторон рамки:

border-style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Он ведет себя так же, как и аналогичные атрибуты стиля border-width и border-color.

Пример:

TD, TH { border-width: thin;
border-color: black;
border-style: dotted }

Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки :

border-left|border-top|border-right|border-bottom:

<толщина> <стиль> <цвет> | inherit

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

H1 { border-bottom: 5px double red }

"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:

border: <толщина> <стиль> <цвет> | inherit
TD, TH { border: thin dotted black }

ВНИМАНИЕ!

Рамки также увеличивают размеры элемента Web-страницы. Поэтому, если мы создадим рамки у блочных контейнеров, формирующих дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.

Представление для нашего Web-сайта

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

Внешний отступ между краями окна Web-обозревателя и содержимым Web-страницы равен нулю. Пусть пространство в окне Web-обозревателя используется максимально полно.

НА ЗАМЕТКУ

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

Внутренние отступы в контейнере с заголовком Web-сайта (cheader) слева и справа - по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web-обозревателя, иначе заголовок будет выглядеть некрасиво.

Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) - 10 пикселов.

Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон - по 5 пикселов.

Внутренний отступ у контейнера с основным содержимым (cmain) сверху - 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.

Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа - по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web-обозревателя.

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

Теперь разделим все четыре контейнера рамками.

Контейнер cheader получит рамку с одной нижней стороной.

Контейнер cmain - рамку с одной левой стороной.

Контейнер ccopyright - рамку с одной верхней стороной.

Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло-синий).

В листинге 11.3 приведен исправленный фрагмент CSS-кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.

Давайте разберем его.

Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега и дали ему значение 0 пикселов:

BODY { color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }

В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:

#cheader { width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }

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

В именованном стиле cnavbar мы указали внешний отступ справа 10 пикселов - он визуально отделит контейнер cnavbar от контейнера cmain:

#cnavbar { width: 250px;
height: 570px;
float: left;
margin-right: 10px }

В именованном стиле cmain мы задали внутренние отступы и рамку с одной левой стороной - она отделит контейнер cmain от контейнера cnavbar:

#cmain { width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }

В именованном стиле ccopyright мы задаем отступы слева и справа по 20 пикселов, а сверху - 10 пикселов. Кроме того, мы создаем рамку с одной верхней стороной, которая отделит контейнер ccopyright от вышерасположенных "соседей":

#ccopyright { width: 1010px;
clear: both;

padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }

Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.

Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и заодно заключим каждую из них в рамки .

Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки - пункты данного списка.

Вот необходимые изменения:

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

Внешние отступы у пунктов списка сверху и снизу - 10 пикселов. Так мы отделим гиперссылки друг от друга.

Рамка пунктов списка - тонкая, сплошная, цвет #B1BEC6.

Внутренние отступы пунктов списка: сверху и снизу - по 5 пикселов, слева и справа - по 10 пикселов. Так мы отделим текст пунктов от рамок .

Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).

Рассмотрим их подробнее.

В именованный стиль navbar, привязанный к тегу списка, который формирует полосу навигации, мы добавили отступ слева, равный –30 пикселов. Благодаря этому список сместится влево, заполняя пустое пространство:

#navbar { font-family: Arial, sans-serif;
font-size: 14pt;

text-transform: uppercase;
list-style-type: none;
margin-left: -30px }

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

#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6 }

Сохраним исправленную таблицу стилей и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу . Стало значительно лучше, не так ли (рис. 11.1)?

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

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

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

Ещё два свойства необходимые для создания простых рамок — это

widht – толщина рамки;

color – цвет рамки;

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

p {
border : 2px solid #ffff00 ;
}

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

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

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева

Записываются значения этих свойств в сокращённом варианте друг за другом (padding: 10px 30px 15px 20px ), и первым ставится значение top , а дальше по часовой стрелке остальные.

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

p {
border : 2px solid #ffff00 ;

margin : 20px ;
}

Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center ;

Далее рассмотрим, как задаются высота и ширина рамки . Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.

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

p {
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px ;
width : 400px ;
}

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

И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.

А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.

p {
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.

В следующих примерах будет изменяться только CSS (то, что заключено в тег style ).

Документ без названия

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

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

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

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

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 . Правило задаёт стиль внешнего контура.