Solid в css

2.10. CSS-рамка

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

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)

Значения:
none	Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden	Эквивалентно none.
dotted
dashed
solid
double
groove
ridge
inset
outset
{1,4}
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

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

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)

Значения:
transparent	Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет	Цвет рамок задается при помощи значений свойства color. {border-color: #cacd58;}
{1,4}
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

border-width (border-top-width, border-right-width, border-bottom-width, border-left-width)

Значения:
thin / medium / thick	Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium
width (px, em)
{1,4}
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div { width: 100px; height: 100px; border: 2px solid grey; }

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

5. Задание рамки для одной границы элемента

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

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

Синтаксис

p {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border, применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius.

Свойство outline позволяет объединить в себе следующие свойства: outline-color, outline-style, outline-width. Если какое-то из значений не указано, его место займет значение по умолчанию.

div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

outline-style

Значения:
none	Значение по умолчанию. Отсутствие внешнего контура.
hidden	Эквивалентно none.
dotted
dashed
solid
double
groove
ridge
inset
outset
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

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

outline-color

Значения:
invert	Значение по умолчанию. Цвет линии (обычно черный) устанавливается автоматически, создавая контраст с основным содержимым.
цвет	Цвет внешней обводки задается с помощью свойства color.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

outline-width

Значения:
thin / medium / thick	Ключевые слова, устанавливают толщину внешнего контура относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего.
длина
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p { outline-style: dotted; outline-width: 5px; }

Свойство border-style

Трепачёв Д.П. © 2012-2018 г.

Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.

Свойство border-style задает тип границы для всех сторон одновременно или отдельно для каждой стороны.

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

См. также свойства border-color и border-style, а также свойство-сокращение для границы border.

Синтаксис

селектор { border-style: solid | dotted | dashed | ridge | double | groove | inset | outset | none; } селектор { border-style: solid dotted; } селектор { border-style: solid dotted solid; } селектор { border-style: solid dotted solid dotted; }

Может принимать 1, 2, 3 или 4 параметра.

Число параметров Описание

1	Тип для всех сторон одновременно.
2	Первый параметр для верха и низа, второй - для левой и правой границ.
3	Первый параметр для верха, второй - для левой и правой границ, третий - для нижней.
4	Первый параметр для верхней границы, второй - для правой, третий - для нижней, четвертый - для левой границы.

Значения

Значение Описание

solid	Сплошная линия.
dotted	Граница в виде точек.
dashed	Граница в виде тире.
ridge	Граница в виде выпуклой линии.
double	Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px!
groove	Вогнутая граница.
inset	Рамка.
outset	Рамка.
none	Отсутствие границы.

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

Примеры

Пример . Значение solid

#elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение dotted

#elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение dashed

#elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение ridge

#elem { border-width: 3px; border-style: ridge; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение double

#elem { border-width: 3px; border-style: double; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение groove

#elem { border-width: 3px; border-style: groove; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение inset

#elem { border-width: 3px; border-style: inset; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример . Значение outset

#elem { border-width: 3px; border-style: outset; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример

В данном примере заданы различные типы границы для разных сторон элементов:

#elem { border-width: 1px; border-style: solid dotted dashed dotted; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример

А сейчас для разных сторон элемента также задана различная толщина границы:

#elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }

Результат выполнения кода:

Пример

Сейчас для верхней и нижней границы задан тип solid, а для правой и левой - dotted:

#elem { border-width: 1px; border-style: solid dotted; border-color: black; width: 300px; height: 100px; }

Результат выполнения кода:

CSS-свойство border

Свойство border позволяет определять стиль, ширину и цвет границ рамки CSS:

Свойство border-style

Свойство border-style определяет тип отображения границы.

Это свойство принимает следующие значения:

• dotted – граница в точечку;
• dashed – штриховая граница;
• solid – сплошная граница;
• double – двойная граница;
• groove – трехмерная CSS рамка вокруг текста. Эффект зависит от значения border-color;
• ridge – трехмерная выпуклая рамка. Эффект зависит от значения border-color;
• inset – трехмерная утопленная рамка. Эффект зависит от значения border-color;
• outset – трехмерная внешняя граница. Эффект зависит от значения border-color;
• none – отключение границы;
• hidden – скрытая граница.

Свойство border-style может принимать от одного до четырех значений (для верхней, правой, нижней и левой границ).

Пример

Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.

Свойство border-width

Свойство border-width определяет ширину четырех границ. Можно указывать ее конкретный размер (в px, pt, cm, em, и т. д.) либо использовать одно из трех предустановленных значений: thin, medium или thick.

Свойство border-width может иметь от одного до четырех значений (для верхней, правой, нижней и левой рамки CSS).

Пример

Свойство border-color

Свойство border-color используется для указания цвета четырех границ.

Цвет можно установить с помощью:

• Названия: red, blue;
• Hex-значения: #ff0000;
• RGB-значения: rgb(255,0,0);
• Сделать прозрачным: значение transparent.

Свойство border-color может иметь от одного до четырех значений (для верхней, правой, нижней и левой границ).

Если значение border-color не установлено, то наследуется цвет элемента.

Пример

Border: отдельная стилизация границ

Из приведенных выше примеров видно, что можно устанавливать разную стилизацию для каждой стороны блока. В CSS-коде также имеются свойства для стилизации отдельных границ (top, right, bottom и left):

Пример

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

Пример

Если у свойства border-style четыре значения:

• border-style: dotted solid double dashed; o верхняя граница будет точечной. o правая граница будет сплошной. o нижняя CSS двойная рамка.

o левая граница будет в штрих.

Если у свойства border-style три значения:

• border-style: dotted solid double; o верхняя граница будет точечной. o правая и левая границы будут сплошными.

o нижняя граница будет двойной.

Если у свойства border-style два значения:

• border-style: dotted solid; o верхняя и нижняя CSS рамки вокруг изображения будут точечными.

o правая и левая границы будут сплошными.

Если у свойства border-style одно значение:

• border-style: dotted; o все четыре границы будут точечными.

В приведенном выше примере использовалось свойство border-style. Однако тот же принцип работы и у border-width, и у border-color.

Короткое свойство border

Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:

• border-width;
• border-style (обязательное свойство);
• border-color.

Пример

Также можно выставлять свойства какой-то конкретной границы с одной из сторон:

Левая граница

Пример

Нижняя граница

Пример

Закругленные границы

Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.

Пример

Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.

Все свойства границ в CSS

Свойство	Описание
Border	Позволяет выставить все свойства границ одним объявлением.
border-bottom	Позволяет выставить все свойства нижней границы одним объявлением.
border-bottom-color	Установка цвета нижней границы.
border-bottom-style	Установка стилизации нижней границы.
border-bottom-width	Установка толщины нижней границы.
border-color	Установка цвета четырех границ
border-left	Позволяет выставить все свойства левой границы одним объявлением.
border-left-color	Установка цвета левой рамки вокруг картинки CSS.
border-left-style	Установка стиля левой границы.
border-left-width	Установка толщины левой границы.
border-right	Позволяет выставить все свойства правой границы одним объявлением.
border-right-color	Установка цвета правой границы.
border-right-style	Установка стиля правой границы.
border-right-width	Установка толщины правой границы.
border-style	Установка стиля четырех границ.
border-top	Позволяет выставить все свойства верхней границы одним объявлением.
border-top-color	Установка цвета верхней границы.
border-top-style	Установка стиля верхней границы.
border-top-width	Установка толщины верхней границы.
border-width	Установка толщины четырех рамок CSS.

Перевод статьи “CSS Border Properties” был подготовлен дружной командой проекта Сайтостроение от А до Я.

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

Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.

Стиль границы

Свойство border-style позволяет определить тип (стиль) границы.

Это свойство принимает разные значения:

• dotted – граница в точку;
• dashed – граница в штрих;
• solid – цельная граница;
• double – двойная граница;
• groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
• ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
• inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color;
• outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color;
• none – отключение;
• hidden – скрытые границы.

У свойства HTML border style может быть от одного до четырех значений (для верхней, правой, нижней и левой стороны).

Пример

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Посмотреть результат

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style!

Border Width

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

Ширину можно указывать как в единицах измерения (px, pt, cm, em и т. д.), так и с помощью ключевых слов: thin, medium или thick.

У свойства border-width может быть от одного до четырех значений (для верхней, правой, нижней и левой стороны).

Пример

p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 2px 10px 4px 20px; }

Посмотреть результат

Border Color

Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.

Цвет можно указывать несколькими способами:

• Названием – вписывается название цвета (например, red);
• Hex – указывается hex-значение цвета (например, #FF0000);
• RGB – указывается RGB-значение цвета (например, rgb(255,0,0));
• transparent (прозрачная).

У свойства border-color может быть от одного до четырех значений (для верхней, правой, нижней и левой стороны).

Если не выставить свойство border-color, то границы будут наследовать цвет элемента.

Пример

p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; }

Посмотреть результат

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента (top, right, bottom и left).

Пример

p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }

Посмотреть результат

Подобного результата можно добиться и следующим методом:

Пример

p { border-style: dotted solid; }

Посмотреть результат

Как это работает

Если у свойства HTML border style будет четыре значения:

• border-style: dotted solid double dashed;
• верхняя граница имеет значение dotted;
• правая граница имеет значение solid;
• нижняя граница имеет значение double;
• левая граница имеет значение dashed.

Если у border-style будет три значения:

• border-style: dotted solid double;
• верхняя граница имеет значение dotted;
• правая и левая границы имеют значение solid;
• нижняя граница имеет значение double.

Если у border-style будет два значения:

• border-style: dotted solid;
• верхняя и нижняя границы имеют значение dotted;
• правая и левая границы имеют значение solid.

Если у HTML border style будет одно значение:

• border-style: dotted;
• то все четыре границы будут иметь значение dotted.

В примерах, приведенных выше, мы использовали свойство border-style. Но учтите, что те же правила применения касаются и border-width, и border-color.

Сокращенное свойство border

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

• border-width;
• border-style (обязательно);
• border-color.

Пример

p { border: 5px solid red; }

Посмотреть результат

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

Левая граница

p { border-left: 6px solid red; background-color: lightgrey; }

Посмотреть результат

Нижняя граница

p { border-bottom: 6px solid red; background-color: lightgrey; }

Посмотреть результат

Закругленные границы

Свойство HTML border radius позволяет оформить элемент границами с закругленными углами.

Пример

p { border: 2px solid red; border-radius: 5px; }

Посмотреть результат

Примечание: свойство border-radius не поддерживается в IE8 и более ранних версиях этого браузера.

Больше примеров

Как одним выражением стилизовать сразу все верхние границы Стилизуем нижнюю границу элементов Устанавливаем ширину левой границы Указываем цвет четырех границ Указываем цвет только правой границы элемента

Перевод статьи “CSS Borders” был подготовлен дружной командой проекта Сайтостроение от А до Я.

---

Смотрите также

• 
  Как html перевести в jpg
• 
  Как в word очистить список последних документов
• 
  Как преобразовать файлы pdf в word
• 
  Как установить на ubuntu php
• 
  Как в word писать над чертой
• 
  Как в word отключить режим ограниченной функциональности
• 
  Цвет фона в css
• 
  Как изменить формат pdf на word
• 
  Как в word 2010 удалить пустую страницу
• 
  Как в word сравнить два файла
• 
  Как эцп подписать документ word