CSS-рамка
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.
Оформление рамок HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
(border-top-style, border-right-style, border-bottom-style, border-left-style) | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
| hidden | Эквивалентно none. |
| dotted | dotted |
| dashed | dashed |
| solid | solid |
| double | double |
| groove | groove |
| ridge | ridge |
| inset | inset |
| outset | outset |
| {1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: |
| 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} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: |
| 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) | {border-width: 5px;} |
| {1,4} | Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width: |
| 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;}Рамка элемента в CSS, свойство border
Свойство CSS border
Свойство CSS border позволяет вам оформлять стиль и цвет границы вокруг элемента.
Свойство border-style
Свойство border-style определяет тип рамки вокруг элемента.
Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!
Значения border-style:
none: без рамки
dotted: рамка из точек
dashed: пунктирная рамка
solid: сплошная рамка
double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)
groove: трехмерная рамка
ridge: трехмерная рамка
inset: трехмерная рамка
outset: трехмерная рамка
Ширина рамки
Свойство border-width задает ширину рамки.
Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).
Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.
Пример
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Посмотреть
Цвет рамки (границы)
Свойство border-color используется для настройки цвета рамки элемента. Цвет можно указать с помощью:
- названия — название цвета на английском, например, «red»
- код RGB, например, «rgb(255,0,0)»
- шестнадцатиричный код, например, «#ff0000»
Кроме того, можно задать цвет границы прозрачным («transparent»).
Заметка: свойство «border-color» не оказывает эффекта на рамку элемента, если не указано свойство «border-style».
Разные цвета границ
С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:
Пример
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Посмотреть
Свойство border-style может иметь от одного, до четырех значений.
- border-style:dotted solid double dashed;
- верхняя граница из точек
- правая граница сплошная
- нижняя граница двойная
- левая граница пунктирная
- border-style:dotted solid double;
- верхняя граница из точек
- левая и правая граница сплошные
- нижняя граница двойная
- border-style:dotted solid;
- верхняя и нижняя границы из точек
- правая и левая граница сплошные
- border-style:dotted;
- все границы из точек
Указанные значения точно так же применяются к свойствам border-color и border-width.
Совет: чтобы запомнить, как применяются значения свойства, надо запомнить простое правило — значения свойства применяются по часовой стрелке, начиная с верхней границы. Вертикальные границы имеют приоритет перед горизонтальными.
Краткая запись свойств рамки
Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.
Для уменьшения лишнего кода, свойства границы можно записать одной записью.
Краткая запись свойств границы называется «border»:
При использовании свойства border соблюдайте следующий порядок свойств:
- border-width
- border-style
- border-color
Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).
Все свойства границ — справка CSS
Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| border | Все свойства границы одной записью | border-width border-style border-color |
1 |
| border-bottom | Все свойства нижней границы одной записью | border-bottom-width border-bottom-style border-bottom-color |
1 |
| border-bottom-color | Цвет нижней границы | border-color | 2 |
| border-bottom-style | Стиль нижней границы | border-style | 2 |
| border-bottom-width | Ширина нижней границы | border-width | 1 |
| border-color | Цвет всех границ | название-цвета rgb- код transparent inherit |
1 |
| border-left | Все свойства левой границы | border-left-width border-left-style border-left-color |
1 |
| border-left-color | Цвет левой границы | border-color | 2 |
| border-left-style | Стиль левой границы | border-style | 2 |
| border-left-width | Ширина левой границы | border-width | 1 |
| border-right | Все свойства правой границы | border-right-width border-right-style border-right-color |
1 |
| border-right-color | Цвет правой границы | border-color | 2 |
| border-right-style | Стиль правой границы | border-style | 2 |
| border-right-width | Ширина правой границы | border-width | 1 |
| border-style | Стиль всех границ | none hidden dotted dashed solid double groove ridge inset outset inherit |
1 |
| border-top | Все свойства верхней границы | border-top-width border-top-style border-top-color |
1 |
| border-top-color | Цвет верхней границы | border-color | 2 |
| border-top-style | Стиль верхней границы | border-style | 2 |
| border-top-width | Ширина верхней границы | border-width | 1 |
| border-width | Ширина всех границ | thin medium thick ширина inherit |
1 |
Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!
CSS border Свойство | Портал информатики для гиков
CSS, HTML, Веб-технологии Вопросы
Свойство border в CSS используется для стилизации границы элемента. Это свойство является комбинацией трех других свойств border-width , border-style и border-color, которые могут использоваться в качестве сокращенной записи этих трех свойств. Он устанавливает или возвращает свойства border-width, border-style, border-color.
Синтаксис:
border = "width style color|initial|inherit"
Стоимость недвижимости :
- ширина : это значение указывает вес или ширину границы.
- style : это значение указывает стиль для границы, то есть будет ли граница пунктирной, пунктирной, сплошной и т. д.
- color : это значение указывает цвет границы.
Ниже код иллюстрирует свойство border в CSS:
Пример:
|
Выход:
Поддерживаемые браузеры: браузер, поддерживаемый свойством CSS border , перечислены ниже:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Опера 3.5
- Apple Safari 1.0
Рекомендуемые посты:
CSS border Свойство
0.00 (0%) 0 votes
CSS свойство border-width
Это свойство определяет толщину всех четырех сторон рамки HTML элемента. Свойство border-width может принимать от одного до четырех значений.
Например:
- border-width: thin medium thick 10px;
- тонкая верхняя сторона рамки (thin)
- правая сторона рамки средней толщины (medium)
- толстая нижняя сторона рамки (thick)
- толщина левой стороны рамки 10px
- border-width: thin medium thick;
- тонкая верхняя сторона рамки состоит из точек (thin)
- правая и левая стороны рамки средней толщины (medium)
- толстая нижняя сторона рамки (thick)
- border-width: thin medium;
- тонкие верхняя и нижняя стороны рамки (thin)
- правая и левая стороны рамки средней толщины (medium)
- border-width: thin;
- все четыре стороны рамки тонкие (thin)
Внимание: Следует всегда определять свойство border-style перед свойством border-width. Элемент должен иметь рамку, прежде чем менять ее толщину.
CSS синтаксис
border-width: medium | thin | thick | толщина | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| medium | Значение по умолчанию. Средняя толщина рамки. |
| thin | Тонкая рамка. |
| thick | Толстая рамка. |
| толщина | Позволяет устанавливать толщину рамки в единицах CSS (например, в px). |
| initial | Устанавливает значение по умолчанию. |
| inherit | Значение наследуется от родительского элемента. |
Пример
Устанавливаем толщину для всех четырех сторон рамки параграфа
p {
border-style: solid;
border-width: 15px;
}
CSS свойство border-style, поддержка в браузерах, примеры использования // Вебшкола онлайн
Перейти к справке CSS
p
{
border-style:solid;
}
Описание и использование
Свойство CSS border-style задает стиль всех четырех границ элемента в одной записи. Свойство может иметь от одного до четырех значений:
- border-style:dotted solid double dashed;
- верхняя граница из точек
- правая граница сплошная
- нижняя граница двойная линия
- левая граница пунктир
- border-style:dotted solid double;
- верхняя граница из точек
- левая и правая граница сплошные
- нижняя граница двойная
- border-style:dotted solid;
- верхняя и нижняя границы из точек
- правая и левая границы сплошные
- border-style:dotted;
- все четыре границы из точек
Заметка: для облегчения запоминания порядка задания стиля бордюров можно запомнить два простых правила:
- Бордюры нумеруются с верхнего по часовой стрелки
- Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.
| Значение по умолчанию | нет |
|---|---|
| Наследование | нет |
| Версия CSS | CSS 1 |
| Синтаксис JavaScript | object.style.borderStyle=»dotted double» |
Поддержка в браузерах
Свойство border-style поддерживается всеми основными браузерами.
Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.
Возможные значения свойства border-style
| Значение | Описание |
|---|---|
| none | Без бордюров |
| hidden | Имеет такой же эффект, как и none, за ислючением случаев конфликта ячеек с различным стилем бордюров, при этом левая ячейка бордюра не будет отображаться совсем |
| dotted | Бордюр из точек |
| dashed | Пунктир, бордюр из коротких отрезков линий |
| solid | Сплошная линия |
| double | Бордюр из двух параллельных линий |
| groove | Вдавленный бордюр, эффект создатся за счет цвета |
| ridge | Выпуклый бордюр, эффект создается за счет цвета |
| inset | Трехмерная вдавленная линия |
| outset | Трехмерная выдавленная линия |
| inherit | Значение наследуется от родительского элемента |
Связанные страницы
Учебник CSS: CSS border
Перейти к справке CSS