Описание
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Синтаксис
border-style: {1,4} | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
None Не отображает границу и ее толщина (border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-style
Объектная модель
document.getElementById("elementID ").style.borderStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами CSS . Данное свойство используется достаточно часто, поэтому ему стоит уделить немного больше внимания.
И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.
Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:
- 1. Толщина рамки: border-width:2px ;
- 2. Стиль рамки: border-style:solid ;
- 3. Цвет рамки: border-color:#ff0000 ;
Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:
- dotted - Это точечная рамка.
- dashed - Это пунктирная рамка
- solid - Это сплошная рамка
- double - Это двойная рамка
- groove - Объемный вид
- ridge - Объемный вид
- inset - Объемный вид
- outset - Объемный вид
Теперь у нас есть все, чтобы создать рамку вокруг заголовка.
HTML
Создание рамки вокруг заголовка.
И сам стиль для рамки.
H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }
В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.
Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.
- top - Верх.
- right - Право
- bottom - Низ
- left - Лево
Таким образом если мы хотим рамку сделать только снизу абзаца то есть подчеркнуть его то к каждому свойству border добавляем приставку bottom . В результате получится следующая структура кода.
H2{
border-bottom-width: 2px;
border-bottom-style: double;
border-bottom-color: #FF0000;
}
Использование данных стилей для браузера будет означать, что нужно создать рамку только с нижней части, т.е. подчеркивающую заголовок. Точно так же можно и продублировать данный код, задав рамку уже с другой стороны, например верхней.
H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }
Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.
Как Вы уже наверное заметили, запись получилась достаточно большая, поэтому существует сокращенный вид записи который за частую на практике и используется.
На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .
То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).
Если с помощью короткой записи нужно указать рамку только с одной стороны, то к свойству добавляем простаку указывающую сторону с которой создать рамку.
H2{ border-top:2px solid #ff0000; }
Вот так, с помощью короткой записи делается рамка с верху, где так же указаны толщина, стиль, и цвет рамки.
Вот таким образом с помощью свойства border делается рамка вокруг любого элемента. Так же с помощью рамки создается подчеркивание ссылок, когда нужен другой цвет подчеркивающей линии. Ну а на этом с рамками все, переходим к следующему важному уроку, где будем рассматривать
Свойство 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:
Спасибо за внимание!
Предыдущая статья
Урок 6.
Границы элемента.
Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?
Комментарии к статье (vk.com)
border
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.
CSS-свойство: border
Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
Пример
Здесь содержится какой-то текст.
Результат данного примера в окне браузера:
Как задать цвет, стиль и размер бордюра в боксах.
В языках разметки бордюр(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: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.
По бордюрам для элементов у меня все, разве что некоторые свойства рассмотрим когда доберемся до таблиц и прочих исключений.
CSS: border. Границы элемента.
CSS3 Границы
CSS3 Границы
С помощью CSS3, вы можете создавать закругленные границы, добавлять тень к контейнерам и использовать изображение в качестве границы — без применения дизайнерской программы, наподобие Photoshop.
В этом уроке вы узнаете о следующих свойствах границы:
- border-radius
- box-shadow
- border-image
Поддержка Браузерами
| Свойство | Поддержка Браузерами |
|---|---|
| border-radius | |
| box-shadow | |
| border-image |
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 позволяет вам указать границу-изображение!
Оригинальное изображение, используемое для создания границы ваше:
Новые Свойства Границы
Атрибут border
Атрибут border , тега
