Свойство CSS – «border», позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.

Примеры задания параметров границы

Сплошная граница элемента

Штриховая граница элемента

Пунктирная граница элемента

Граница элемента двойной линией

Свойство отдельных участков границы

Вдавленная рифленая рамка в объёме

Выпуклая рифленая рамка в объёме

Объемная вдавленная рамка

Объемная выпуклая рамка

Уроки / CSS /

Урок 7. Рамка элемента CSS

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:

Как установить рамки у элемента? Делаем следующим образом:

#block { 
  border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета  */
}

Если Вы хотите установить одну-две-три рамки с определённой стороны, то указываем так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

.block { 
  border-right: 3px solid #0085cc;
  border-bottom: 2px dashed #0085cc;
}

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none

.empty { 
  border: none; /* у элемента с классом empty не будет рамки */
}

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента.

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

outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:

outline: none;

Спасибо за внимание!

 

Предыдущая статья
Урок 6.

Границы элемента.

Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?

Похожие статьи

Комментарии к статье (vk.com)

border

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

Описание

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

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

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.

CSS-свойство: border

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

Синтаксис

border: border-width border-style border-color|inherit;

Значения свойства

Пример

<!doctype html> <html> <head> <meta charset=»utf-8″> <title>Пример</title> <style type=»text/css»> p { border: 5px solid red; } </style> </head> <body> <p>Здесь содержится какой-то текст.</p> </body> </html>

Результат данного примера в окне браузера:

Как задать цвет, стиль и размер бордюра в боксах.

В языках разметки бордюр(border), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все.

Атрибут border

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

В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width — толщина верхнего бордюра
border-right-width — толщина правого бордюра
border-bottom-width — толщина нижнего бордюра
border-left-width — толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;} (верх право низ лево).
Ширина бордюра может задаваться:
цифрами DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin — тонкий бордюр, DIV{border-width:thin}
medium — средний бордюр, DIV{border-width:medium}
thick — толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick.

Так-же мы можем управлять цветом бордюра при помощи border-color или если быть точнее цветом каждой стороны:
border-top-color цвет верхнего бордюра;
border-right-color цвет правого бордюра;
border-bottom-color цвет нижнего бордюра;
border-left-color цвет бордюра с левой стороны.
Значение цвета задается как для color, т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow, также цвета можно задавать: color:#000000, color:#AF0 , color:rgb(255,0,0) или color:rgb(100%, 0%, 0%).
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0). Например color:lime = color:#00ff00 = color:#0F0 = color:rgb(0%, 100%, 0%), а для браузера все равно color:rgb(0,255,0), т.е. он вычислит это значение.

Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style стиль верхнего бордюра;
border-right-style стиль правого бордюра;
border-bottom-style стиль нижнего бордюра;
border-left-style стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none — Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden — Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted — Бордюр из точек.
4)border-style:dashed — Бордюр из пунктирной линии.
5)border-style:solid — Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double — Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove — Бордюр выглядит как вырезанный в канве.
8)border-style:ridge — Бордюр выглядит как выступающий над канвой.
9)border-style:inset — Весь бокс выглядит как вдавленный в канву.
10)border-style:outset — Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.

Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;}, но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px}, т.е. задается только одно значения.

Для того чтобы управлять не всем бордюром, а каждой частью в отдельности существуют правила:
{border-top: размер стиль цвет;} Управление верхним бордюром;
{border-right: размер стиль цвет;} Управление бордюром справа;
{border-bottom: размер стиль цвет;} Управление нижним бордюром;
{border-left: размер стиль цвет;} Управление бордюром слева.
Эти правила можно использовать как по отдельность так и все вместе.

Исключением есть вот такое правило:
H1{
border-left: 2px double red;
border: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.

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

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

Internet Explorer 9 поддерживает некоторые из новых свойств границы.

Firefox требует приставки -moz- для border-image.

Chrome и Safari требует приставки -webkit- для border-image.

Opera требует приставки -o- для border-image.

Safari также требует приставки -webkit- для box-shadow.

Opera поддерживает новые свойства границы.

CSS3 Закругленные Углы

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

В CSS3, создание закругленных углов является простым.

В CSS3, свойство border-radius используется для создания закругленных углов:

Этот блок имеет закругленные углы!

CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:

CSS3 Граница-Изображение

Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:

Свойство border-image позволяет вам указать границу-изображение!

Оригинальное изображение, используемое для создания границы ваше:

Новые Свойства Границы

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут border

Атрибут border, тега <TABLE>, применяется для указания толщины рамки вокруг таблицы.

HTML Borders

Допустимо использовать border без значений, тогда толщина рамки будет равна одному пикселю. По умолчанию рамка отображается с трехмерными эффектами, но если дополнительно применить атрибут background, то рамка станет «плоской».

Кроме этого, если атрибут border имеет ненулевое значение, то браузеры показывают и тонкие границы вокруг самих ячеек. Отображением этих границ можно управлять, используя атрибут rules.

Значения

Значением атрибута может быть любое неотрицательное число задающее размер в пикселях.

Значение по умолчанию: 0.

Синтаксис

Обязательный атрибут: нет.

Пример HTML: применение атрибута border

Результат примера

Результат. Применение атрибута border.

Поддержка версиями HTML

Данный атрибут отсутствует в HTML 5, вместо него рекомендуется использовать стили (CSS).

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