Свойство css border: CSS-свойство: border | CSS – Все о свойстве border / Habr

Содержание

CSS-рамка

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

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

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

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
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}
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:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
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
:
{border-width: 5px 10px 15px 3px;}
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 Цвет всех границ название-цвета
hex-код
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:
Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

        CSS | border Property

    </title>

    <style>

        h2 {

            color: green;

        }

          

        #gfg {

            border: 4px solid blue;

            width: 60%;

        }

    </style>

</head>

  

<body>

    <center>

        <h2>GeeksForGeeks</h2>

  

        <h3>DOM Style border Property</h3>

  

        

        <div id="gfg">

            GeeksForGeeks. 

            It is a computer science portal for geeks.

        </div>

    </center>

</body>

  

</html>               

Выход:

Поддерживаемые браузеры: браузер, поддерживаемый свойством 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;
    • все четыре границы из точек

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

  1. Бордюры нумеруются с верхнего по часовой стрелки
  2. Вертикальные бордюры имеют приоритет перед горизонтальными, т.е. если указано три цвета, два вертикальных имеют свои цвета, а левый бордюр получает цвет от правого.
Значение по умолчанию нет
Наследование нет
Версия 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


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *