Как изменить цвет границы css - Исправление ошибок и поиск оптимальных решений проблем

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#propdef-border-color

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

border-color: [цвет | transparent] {1,4} | inherit

Значения

См. цвет

transparent: Устанавливает прозрачный цвет.
inherit: Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений	Результат
1	Цвет границы будет установлен для всех сторон элемента.
2	Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3	Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-color</title>
  <style>
   h1 { 
    border-color: red white; /* Цвет границы */ 
    border-style: solid; /* Стиль границы */  
   }
   p { 
    border-color: #008a77; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойства border-color

Объектная модель

[window.]document.getElementById(«elementID«).style.borderColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Источник

The border-color shorthand CSS property sets the color of an element’s border.

Try it

Constituent properties

Syntax

/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240, 30, 50, 0.7) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

The border-color property may be specified using one, two, three, or four values.

When one value is specified, it applies the same color to all four sides.
When two values are specified, the first color applies to the top and bottom, the second to the left and right.
When three values are specified, the first color applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).

Values

<color>: Defines the color of the border.

Formal definition

Initial value	as each of the properties of the shorthand: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Applies to	all elements. It also applies to `::first-letter`.
Inherited	no
Computed value	as each of the properties of the shorthand: `border-bottom-color`: computed color `border-left-color`: computed color `border-right-color`: computed color `border-top-color`: computed color
Animation type	as each of the properties of the shorthand: `border-bottom-color`: a color `border-left-color`: a color `border-right-color`: a color `border-top-color`: a color

Formal syntax

border-color = 
  <color>{1,4}

Examples

Complete border-color usage

HTML

<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

Result

Specifications

Specification
CSS Logical Properties and Values Level 1 # logical-shorthand-keyword
CSS Backgrounds and Borders Module Level 3 # border-color

Browser compatibility

BCD tables only load in the browser

border-width – толщина границы

CSS-свойство border-width определяет толщину границы. По умолчанию данное свойство имеет значение medium, что эквивалентно 3px.

Задавать значение можно с помощью ключевых слов: thin (эквивалентно 1px), medium (3px) и thick (5px), а также используя различные единицы измерения: px, em, rem, vh, vw.

.thin {
  border-width: thin;
}
.medium {
  border-width: medium;
}
.thick {
  border-width: thick;
}

border-style – тип линии

CSS-свойство border-style предназначено для установки стилей границам.

Значения:

solid – сплошная непрерывная линия;
none (по умолчанию) – без отображения границы;
hidden – то же самое, что none, за исключением отображения границ у ячеек таблицы с border-collapse: collapse;
dashed – штриховая линия;
dotted – линия из точек;
double – двойная линия;
groove – линия со вдавленным эффектом;
ridge – линия с выпуклым эффектом;
inset – добавляет эффект к границе таким образом, чтобы весь блок выглядел вдавленным;
outset – добавляет эффект к границе таким образом, чтобы весь блок выглядел выпуклым;

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

Отличие между border-style: none и border-style: hidden:

<style>
  td {
    border: thick solid #4caf50;
  }
  .hidden {
    border-style: hidden;
  }
  .none {
    border-style: none;
  }
</style>

<!-- border-collapse: collapse -->
<table style="border-collapse: collapse">
  <tr>
    <td class="hidden">hidden</td>
    <td>solid</td>
  </tr>
</table>

<!-- border-collapse: separate -->
<table>
  <tr>
    <td class="none">none</td>
    <td>solid</td>
  </tr>
</table>

border-color – цвет линии

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

Задать определённый цвет границам можно разными способами, а именно с помощью:

названия цвета, например: red, green и т.д.;
шестнадцатеричного кода, например: #ff0000, #00ff00 и т.д.;
rgb(), rgba(), hsl() или hsla();
transparent (прозрачный);

Если указать одно значение, то оно будет применено сразу к 4 границам (верхней, правой, нижней и левой).

.danger {
  border-color: #f44336;
}
.primary {
  border-color: #2196f3;
}
.success {
  border-color: #4caf50;
}

Но можно установить и отдельно для каждой, для этого значения необходимо перечислить через пробел:

.box {
  border-color: #f44336 #2196f3 #4caf50 #ff9800;
}

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

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

Кроме этого также доступны CSS-свойства для задания отдельных характеристик границ:

для толщины: border-top-width, border-right-width, border-bottom-width и border-left-width;
для типа линии: border-top-style, border-right-style, border-bottom-style и border-left-style;
для цвета: border-top-color, border-right-color, border-bottom-color и border-left-color.

border-radius – закругление углов

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

border-radius работает даже если у элемента нет границ, т.к. его действие распространяется и на фон.

В основном border-radius используется с одним значением.

Например:

.box {
  border-radius: 20px;
}

Когда вы используете только одно значение, все углы элемента скругляются на это значение.

Кроме указания значений, с помощью единиц измерения для задания фиксированной длины (например: px, rem, em и т.д.), вы также можете использовать проценты.

В основном это используется для создания круга путем установки border-radius, равным 50%.

.circle {
  border-radius: 50%;
}

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

Пример, показывающий разницу между border-radius: 40px и border-radius: 40% применительно к прямоугольнику:

.rect-1 {
  width: 150px;
  height: 100px;
  border: thick solid #689f38;
  border-radius: 40%;
}
.rect-2 {
  width: 150px;
  height: 100px;
  border: thick solid #689f38;
  border-radius: 40px;
}

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

Кроме этого, скруглить отдельно каждый угол можно с помощью свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

С двумя значениями:

.rect {
  border-radius: 10px 20px;
}

С тремя значениями:

.rect {
  border-radius: 10px 20px 30px;
}

Кроме этого, border-radius позволяет создавать ассиметрично скруглённые углы. Осуществляется это с помощью косой черты.

.rect {
  border-radius: 10px 20px 30px 40px / 20px 40px 60px 80px;
}

Перед косой черты указываются значения, отвечающие за горизонтальные расстояния, а после — вертикальные.

border-image – изображение в качестве рамки

border-image – это CSS-свойство, которое позволяет установить в качестве границ элемента изображение или CSS градиент.

border-image можно применить к любому элементу, за исключением тегов, определяющих содержимое таблицы (tr, th, td) когда в качестве значения border-collapse установлено collapse.

<style>
.square {
  border: 30px solid transparent;
  border-image: url('/examples/images/border.png') 16.66666667% / 1 / 0 stretch;
}
</style>

<div class="square">square</div>

border-image является краткой записью следующих пяти свойств:

border-image-source (none);
border-image-slice (100%);
border-image-width (1);
border-image-outset (0);
border-image-repeat (stretch).

Таким образом, пример приведённый выше с помощью специальных CSS-свойств можно записать следующим образом:

.square {
  border: 30px solid transparent;
  /* border-image: url('/examples/images/border.png') 16.66666667% / 1 / 0 stretch; */
  border-image-source: url('/examples/images/border.png');
  border-image-slice: 16.66666667%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

Пример создания градиентной границы с помощью border-image:

<style>
.square {
  border: 30px solid transparent;
  border-image: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%) 20% / 1 / 0 stretch;
  /*  border-image-source: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    border-image-slice: 20%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch; */
}
</style>

<div class="square">square</div>

border-image-source

border-image-source – задаёт изображение (посредством URL-адреса, URI-данных или встроенного SVG) или CSS градиент, который необходимо использовать для отрисовки границы. Значение по умолчанию: none.

border-image-slice

border-image-slice – сообщает браузеру, как необходимо «разрезать» изображение и тем самым определить области для отрисовки границ.

В процессе нарезки изображения образуется 9 областей: четыре угла, четыре стороны и центр.

Области 1 – 4 используется всего один раз для отрисовки соответствующих углов границ элемента;
Области 5 – 8 применяются для отрисовки соответствующих сторон границ, расположенных между углами. В зависимости от значения свойства border-image-repeat область исходного изображения может растягиваться, повторяться, масштабироваться или иным образом изменяться, чтобы соответствовать размерам элемента;
Область 9 является центральной и по умолчанию отбрасывается.

Для использования области 9 в качестве фонового изображения элемента, необходимо добавить в любое место значения border-image-slice ключевое слово fill. При этом это фоновое изображение будет располагаться поверх фактического background.

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

В border-image-slice можно установить от одного до четырёх значений:

при указании одного значения, все четыре среза создаются на одинаковом расстоянии от соответствующих сторон;
если два значения, то первая величина определяет срезы сверху и снизу, а вторая — слева и справа;
когда указаны три значения, первое создает срез сверху, второе – слева и справа, а третье – снизу;
при задании четырех значений, они определяют срезы соответственно сверху, справа, снизу и слева (т.е. по часовой стрелке).

При указании одного значения:

.square {
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border.png');
  border-image-slice: 16.67%;
}

При указании двух значений:

.square {
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border-01.png');
  border-image-slice: 30% 10%;
}

Свойства border-image-repeat, border-image-width и border-image-outset позволяют задать каким образом эти области должны использоваться для формирования окончательной отрисовки границы.

border-image-width

Свойство border-image-width устанавливает толщину границы для изображения. По умолчанию имеет значение 1 (это означает, что она равна border-width).

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

В border-image-width можно задать от одного до четырех значений:

при указании одного значения, все четыре границы будут иметь одну эту толщину;
при задании двух значений, первая величина будет определять толщину верхней и нижней границы, а вторая – левой и правой;
когда указаны три значения: первая величина будет задавать толщину верхней границы, вторая – левой и правой, а третья – нижней;
при задании четырёх значений: первая величина – за толщину верхней границы, вторая – правой, третья – нижней и четвёртая – левой (т.е. по часовой стрелке, начиная с верхней).

Задавать значение можно с помощью:

числа – в этом случае, толщина границы будет вычисляться как значение border-width умноженное на это число;
px и других единиц – в соответствии с указанными единицами;
процентов (%) – толщина границы будет вычисляться в процентах относительно размера блока;
ключевого слова auto – толщина границы берётся из border-image-slice (если подходящего размера нет, то используется то, что задано в border-width).

Пример установки толщины границы для изображения в раза превышающей border-width:

<style>
.square {
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border-01.png');
  border-image-slice: 30% 10%;
  border-image-width: 2; /* толщина границы */
}
</style>

<div class="square">square</div>

border-image-outset

СSS-свойство border-image-outset задает расстояние, на которое нужно сместить границы наружу относительно их начального положения.

В border-image-outset можно задать от одного до четырёх значений:

при задании одного значения, оно применяется ко всем четырем сторонам;
если указаны два значения, то первое применяется к верхней и нижней границам, а второе — к левой и правой;
указании трёх значений, первое применяется к верхней границе, второе — к левой и правой, а третье — к нижней;
указаны четыре значения, они применяются к верхней, правой, нижней и левой границам в указанном порядке (по часовой стрелке).

Задавать значения можно с помощью:

px, em, rem и других CSS единиц — в этом случае смещение будет определяться в соответствии с этим значением;
числа – в этом случае расстояние будет равно этому число умноженное на значение border-width.

Пример, в котором сместим границы на величину, равную 1 * border-width:

<style>
.square {
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border-01.png');
  border-image-slice: 30% 10%;
  border-image-width: 2;
  /* смещение всех 4 границ на величину равную величине border-width */
  border-image-outset: 1;
}
</style>

<div class="square">square</div>

border-image-repeat

CSS свойство border-image-repeat определяет как должны быть заполнены части границ, расположенные между углами в соответствии с областями 5 – 8 исходного изображения.

border-image-repeat может быть установлено с использованием одного или двух значений.

Когда указано одно значение, то оно применяет одно и то же поведение ко всем четырем сторонам. При задании двух значений, первое применяется к верхней и нижней сторонам, а второе — к левому и правому.

Значения:

stretch (по умолчанию) – растягивает области 5 – 8 исходного изображения для заполнения частей границ между углами;
repeat – повторяет области 5 – 8 исходного для заполнения промежутка между углами границ границей (если область изображения целиком не помещается, то оно обрезается);
round – тоже самое что repeat, за исключением того, что когда часть изображения не помещается, оно масштабируется таким образом, чтобы вписать его N раз;
space – тоже самое что repeat, за исключением того, что когда часть изображения не помещается, между ними добавляется пустое пространство таким образом, чтобы вписать его N раз.

Пример border-image-repeat с одним значением:

<style>
.rectangle {
  width: 400px;
  height: 300px;
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border-02.png');
  border-image-slice: 16.66666667%;
  /* определяем как должны повторяться части границ между углами */
  border-image-repeat: round;
}
</style>

<div class="rectangle">rectangle</div>

Пример border-image-repeat с двумя значениями:

<style>
.rectangle {
  width: 400px;
  height: 300px;
  border: 30px solid transparent;
  border-image-source: url('/examples/images/border-02.png');
  border-image-slice: 16.66666667%;
  /* определяем как должны повторяться части границ между углами */
  border-image-repeat: stretch round;
}
</style>

<div class="rectangle">rectangle</div>

Источник

Свойство border-color устанавливает цвет границы на разных сторонах элемента.

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

Фон

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-shadow

Синтаксис¶

/* border-color: color */ /* the color applies to all sides */
border-color: red;

/* border-color: top&bottom right&left */
border-color: red #f015ca;

/* border-color: top right&left bottom */
border-color: red yellow green;

/* border-color: top right bottom left */
border-color: red yellow green blue;

border-color: inherit;

Значения¶

<цвет>: Цвет
transparent: Устанавливает прозрачный цвет.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений	Результат
1	Цвет границы будет установлен для всех сторон элемента.
2	Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3	Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по-умолчанию: Значение свойства color

Применяется ко всем элементам

Спецификации¶

CSS Backgrounds and Borders Module Level 3
CSS Level 2 (Revision 1)
CSS Level 1

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-color</title>
    <style>
      h1 {
        border-color: red white; /* Цвет границы */
        border-style: solid; /* Стиль границы */
      }
      p {
        border-color: #008a77; /* Цвет границы */
        border-style: solid; /* Стиль границы */
        padding: 5px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <h1>Шоу-бизнес как внутридискретное арпеджио</h1>
    <p>
      Септаккорд, согласно традиционным представлениям,
      иллюстрирует однокомпонентный шоу-бизнес.
    </p>
  </body>
</html>

Источник

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

Краткая информация

Значение по умолчанию	Значение свойства color
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

border-color: [<цвет> | transparent]{1,4}

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

<цвет>: См. цвет.
transparent: Устанавливает прозрачный цвет.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений	Результат
1	Цвет границы будет установлен для всех сторон элемента.
2	Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3	Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  padding: 10px;
  border: 4px dotted;
  border-color: {{ playgroundValue }};
}

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>border-color</title>
<style>
h1 {
border-color: red white; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
p {
border-color: #008a77; /* Цвет границы */
border-style: solid; /* Стиль границы */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h1>Шоу-бизнес как внутридискретное арпеджио</h1>
<p>Септаккорд, согласно традиционным представлениям,
иллюстрирует однокомпонентный шоу-бизнес. </p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойства border-color

Объектная модель

Объект.style.borderColor

Примечание

Internet Explorer до версии 7.0 не поддерживает значение transparent.

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


4	7	12	1	9.2	1	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

Рецепты

Источник

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

Что представляет из себя граница элемента? Граница это обычная линия, которая располагается между внутренним (padding) и внешним (margin) отступом вокруг содержимого элемента.

Рис. 82 Границы элемента в CSS.

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

Для придания особого вида границ элемента в CSS используются следующие универсальные свойства:

ширина границы — border-width.
стиль границы — border-style.
цвет границы — border-color.

CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.

Для запоминания порядка расстановки цветов, ширины и стиля границы в одном объявлении, можно использовать английское слово TRouBLe (где: T — top, R — right, B — bottom, L — left). По такому же принципу задаются отступы в ранее рассмотренных свойствах padding (внутренние отступы) и margin (внешние отступы).

Определить цвет границы вы можете в любой системе задания цвета (HEX, RGB, RGBA, HSL, HSLA, «предопределённые цвета»). Если вы пропустили тему «Цветовое оформление в CSS», то вы можете вернуться для её изучения.

Для простоты и понимания принципа указания цвета границ рассмотрим пример с использованием предопределённых цветов:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания цвета границ элемента</title>
<style> 
.primer1 {
border-color: red green blue yellow; /* задаём цвета для границ Top-Right-Bottom-Left  */
}
.primer2 {
border-color: red green blue; /* задаём цвета для границ Top-Right&Left-Bottom  */
}
.primer3 {
border-color: red green; /* задаём цвета для границ Top&Bottom-Right&Left  */
}
.primer4 {
border-color: red; /* задаём цвет для всех границ красный Top&Right&Bottom&Left */
}
p {
width: 140px; /* задаём ширину элемента */
border-width: 10px; /* задаём  ширину границы */
border-style: solid; /* задаём сплошную границу */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer1">border-color:<br> red green blue yellow;</p>
		<p class = "primer2">border-color:<br> red green blue;</p>
		<p class = "primer3">border-color:<br> red green;</p>
		<p class = "primer4">border-color: red;</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 83 Пример указания цвета границ элемента.

Как вы могли заметить, в данном примере мы также использовали универсальные свойства, которые отвечают за ширину (border-width) и стиль границы (border-style).

Свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений. За исключением процентных значений вы можете использовать любые единицы измерения CSS, либо ключевые слова:

thin (тонкая линия).

medium (средняя линия) – это значение по умолчанию.

thick (толстая линия).

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример установки ширины границ</title>
<style> 
.primer1 {
border-width: thin medium thick 7px; /* задаём ширину для границ Top-Right-Bottom-Left  */
}
.primer2 {
border-width: thin medium thick; /* задаём ширину для границ Top-Right+Left-Bottom  */
}
.primer3 {
border-width: thin medium; /* задаём ширину для границ Top+Bottom-Right+Left  */
}
.primer4 {
border-width: 0.1em; /* задаём ширину границ 0.1em для всех сторон Top+Right+Bottom+Left */
}
p {
width: 150px; /* задаём ширину элемента */
border-style: solid; /* задаём стиль границы - сплошная */
border-color: orange; /* задаём цвет границы */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer1">border-width:<br> thin medium thick 7px;</p>
		<p class = "primer2">border-width:<br> thin medium thick;</p>
		<p class = "primer3">border-width:<br> thin medium;</p>
		<p class = "primer4">border-width: 0.1em;</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 84 Пример установки ширины границ.

Мы уже не раз с Вами сталкивались с применением стиля границы (border-style) элементов, но при этом все время использовали сплошную границу (значение solid), давайте рассмотрим все возможные значения, которые допускается использовать:

Значение	Описание
none	Указывает на отсутствие границы. Это значение по умолчанию.
hidden	Указывает на отсутствие границы как и значение none, но имеет более высокий приоритет. Например, если в таблице для первой ячейки задано значение none, а для второй (соседней) задана видимая граница, то граница между ячейками отображается. Если для первой ячейки таблицы задано значение hidden, а для второй (соседней) задана видимая граница, то граница между ячейками не будут отображаться.
dotted	Точечная граница.
dashed	Пунктирная граница.
solid	Сплошная граница.
double	Двойная граница.
groove	Отображает границы с 3d эффектом (противоположно значению ridge).
ridge	Отображает границы с 3d эффектом (противоположно значению groove).
inset	Отображает границы с 3d эффектом (противоположно значению outset). При применении к ячейке таблицы с border-collapse : «collapse» — это значение ведет себя как groove.
outset	Отображает границы с 3d эффектом (противоположно значению inset). При применении к ячейке таблицы с border-collapse : «collapse» — это значение ведет себя как ridge.

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания стиля границ элемента</title>
<style> 
.primer1 {
border-style: dotted solid dashed double; /* задаём стиль для границ Top-Right-Bottom-Left  */
}
.primer2 {
border-style: dotted solid dashed; /* задаём стиль для границ Top-Right+Left-Bottom  */
}
.primer3 {
border-style: dotted solid; /* задаём стиль для границ Top+Bottom-Right+Left  */
}
.primer4 {
border-style: dotted; /* задаём точечную границу для всех сторон Top+Right+Bottom+Left */
}
p {
width: 170px; /* задаём ширину элемента */
border-width: 5px; /* задаём ширину границы */
border-color: green; /* задаём цвет границы */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer1">border-style:<br> dotted solid dashed double;</p>
		<p class = "primer2">border-style:<br> dotted solid dashed;</p>
		<p class = "primer3">border-style:<br> dotted solid;</p>
		<p class = "primer4">border-style: dotted;</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 85 Пример указания стиля границ элемента.

Универсальное свойство border

В CSS существует множество вариантов стилизации границ, используя различные свойства, мы постараемся с вами в этой статье охватить все необходимые, а сейчас рассмотрим свойство, которое применяется чаще всего и позволит нам в одном объявлении указать значения ширины, цвета и стиля границы – свойство border:

Рис. 86 Универсальное свойство border.

CSS свойство border позволяет установить все свойства границ в одном объявлении. На вышеуказанном изображении мы задаем сплошную границу шириной 10 пикселей черного цвета. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию:

Значение	Описание
border-width	Задает ширину границы. По умолчанию — «medium».
border-style	Задает стиль границы. По умолчанию — «none».
border-color	Задает цвет границы. По умолчанию — цвет элемента.

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства border</title>
<style> 
.primer {
border: 4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета */
}
.primer2 {
border: .2em dotted red; /* задаём пунктирную границу шириной 0.2em красного цвета */
background-color: khaki; /* задаём цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "primer">Сплошная граница шириной 4px оранжевого цвета</div><br>
		<div class = "primer2">Пунктирная граница шириной 0.2em красного цвета.</div>
	</body>
</html>

В данном примере для первого блока мы указали сплошную границу шириной 4px оранжевого цвета, а для второго пунктирную границу шириной 0.2em красного цвета:

Результат нашего примера:

Рис. 87 Пример использования свойства border.

Обращаю Ваше внимание, что если вы используете пунктирную или точечную границы для элемента, то будьте готовы к тому, что браузеры размещают линию границ поверх цвета заднего фона, то есть это значит, что цвет фона будет виден в промежутках между точками, либо пунктира — это значение по умолчанию для всех элементов. В скором времени в статье учебника «Работа с фоном элемента в CSS» мы более подробно рассмотрим с Вами работу с задним фоном элемента, и научимся определять область элемента для которой будет задаваться задний фон, что при необходимости позволит нам избежать подобной ситуации.

Использование свойств для одиночных границ

Мы с Вами рассмотрели универсальное свойство border, которое позволяет установить все свойства границ в одном объявлении, но что нам делать, если нам необходимо стилизовать каждую границу элемента по-разному? Для этого в CSS существует четыре универсальных свойства для каждой стороны по отдельности:

border-top (устанавливает все свойства верхней границы в одном объявлении).
border-right (устанавливает все свойства правой границы в одном объявлении).
border-bottom (устанавливает все свойства нижней границы в одном объявлении).
border-left (устанавливает все свойства левой границы в одном объявлении).

Эти свойства работают аналогично свойству border, разница заключается лишь в том, что используя свойство border-* вы стилизуете выбранную сторону, а не все стороны сразу. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию. Принцип работы свойства изображен ниже:

Рис. 88. Пример работы универсального свойства border-top.

В данном примере мы задаем сплошную границу шириной 10 пикселей черного цвета для верхней границы.

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

Верхняя граница:

border-top-width (устанавливает ширину верхней границы).
border-top-style (устанавливает стиль верхней границы).
border-top-color (устанавливает цвет верхней границы).

Правая граница:

border-right-width (устанавливает ширину правой границы).
border-right-style (устанавливает стиль правой границы).
border-right-color (устанавливает цвет правой границы).

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

border-bottom-width (устанавливает ширину нижней границы).
border-bottom-style (устанавливает стиль нижней границы).
border-bottom-color (устанавливает цвет нижней границы).

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

border-left-width (устанавливает ширину левой границы).
border-left-style (устанавливает стиль левой границы).
border-left-color (устанавливает цвет левой границы).

Давайте рассмотрим пример, чтобы закрепить полученные знания:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойств для одиночных границ</title>
<style> 
.primer {
border-left: 4px solid violet; /* устанавливаем сплошную границу размером 4px фиолетового цвета */
border-bottom: .1em solid; /* устанавливаем сплошную границу размером .1em цвета элемента (по умолчанию) */
}
.primer2 {
border: 1px solid green; /* устанавливаем сплошную границу размером 1px зеленого цвета */
border-bottom-style: none; /* устанавливаем стиль границы снизу - отсутствие границы */
border-left-width: 3px; /* устанавливаем ширину границы с левой стороны 3px */
}
</style>
</head>
	<body>
		<div class = "primer">Абзац с классом primer1</div></br>
		<div class = "primer2">Абзац с классом primer2</div>
	</body>
</html>

В данном примере для абзаца с классом primer1 мы указали универсальным свойством border-left сплошную границу с левой стороны шириной 4 пикселя фиолетового цвета, а для нижней границы указали, что она будет сплошная шириной 0.1em (по умолчанию черного цвета).

Для абзаца с классом primer2 универсальным свойством border мы указали для всех сторон элемента сплошную границу размером 1 пиксель зеленого цвета, при этом свойством border-bottom-style со значением none мы убрали границу снизу, а свойством border-left-width увеличили размер границы слева до 3 пикселей.

Результат нашего примера:

Рис. 89 Пример использования свойств для одиночных границ.

Скругление углов элемента.

CSS 3 подарил нам такое универсальное свойство, как border-radius css3 , оно позволяет нам определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению (даже если у элемента отсутствуют границы).

Рис. 90 Принцип работы свойства border-radius.

Изображение под номером 1 — скругление углов отсутствует. Значение для элемента по умолчанию 0 (ноль).

Изображение под номером 2 — скругление углов (по типу дуги окружности). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em и так далее) и определяют radius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый).

Если значение bottom-left  (нижний левый) опущено, то оно такое же, как top-right  (верхний правый угол).
Если значение bottom-right  (нижний правый угол) опущено, то оно такое же, как top-left  (верхний левый угол).
Если значение top-right  (верхний правый угол) опущено, то оно такое же, как top-left  (верхний левый угол).
Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Это свойство позволяет нам создавать не только скругленные, но и эллиптические углы. Скругление углов происходит по типу дуги эллипса – изображение 3. Значения указываются в единицах измерения CSS (px, em и так далее).
Порядок указания значений при скруглении по типу дуги эллипса следующий (изображение ниже): задаются значение /-я (от одного до четырёх) horisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) vertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Рис. 91 Порядок указания значений для свойства border-radius

(при скруглении углов по типу дуги эллипса).

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример округления углов элемента в CSS</title>
<style> 
div {
width: 50px; /* устанавливаем ширину блока */
height: 50px; /* устанавливаем высоту блока */
border: 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */
margin-bottom: 15px; /* устанавливаем величину внешнего  отступа от нижнего края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон */
}
.orange {
border-radius: 50px; /* скругление всех углов (по типу дуги окружности) */
background-color: rgba(255,165,0, .5); /* задаём цвет заднего фона */
} 
.lemon {
border-radius: 50px 25%; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left (скругление по типу дуги окружности) */
background-color: yellow; /* задаём цвет заднего фона */
} 
.lime {
border-radius: 25px 75% / 4em; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left / вертикальный радиус  - значение применяется ко всем четырем углам (скругление элемента по типу дуги эллипса) */
background-color: lime; /* задаём цвет заднего фона */
} 
</style>
</head>
	<body>
		<div class =  "orange" > 50px</div>
		<div class =  "lemon" > 50px 25%</div>
		<div class =  "lime" > 25px 75% / 4em</div>
	</body>
</html>

В данном примере мы установили для всех блоков ширину и высоту равной 50 пикселям, указали внешние и внутренние отступы, и указали сплошную границу 3 пикселя оранжевого цвета.

Для демонстрации свойства border-radius css3 создали 3 различных класса:

.orange — скругление всех углов элемента по типу дуги окружности. Одно значение для всех углов.
.lemon — скругление всех углов элемента по типу дуги окружности. Указали 2 значения для углов, из которых: 1-ое значение — top-left и bottom-right, второе top-right и bottom-left.
.lime — скругление всех углов элемента по типу дуги эллипса. Мы указали два значения для горизонтального радиуса (1-ое значение top-left и bottom-right, второе top-right и bottom-left), а третее значение через косую черту задает вертикальный радиус всех четырех углов.

Результат нашего примера:

Рис. 92. Пример округления углов элемента в CSS.

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

На примере border-bottom-left-radius css3 (определяет форму нижнего левого угла):

Рис. 93 Принцип работы свойства border-bottom-left-radius.

Изображение под номером 1 — cкругление нижнего левого угла отсутствует. Значение элемента по умолчанию 0 (ноль).
Изображение под номером 2 — cкругление нижнего левого угла (по типу дуги окружности). Значение указывается в единицах измерения CSS (px, em и так далее) и определяет radius (радиус) скругления. Допускается указывать значения в процентах. Отрицательные значения недопустимы.
Изображение под номером 3 — cкругление нижнего левого угла (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em и так далее), первое значение определяет horisontal (горизонтальный) радиус скругления, а второе vertical (вертикальный). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Давайте рассмотрим пример, в котором укажем различные значения для свойства border-bottom-left-radius css3 и посмотрим, что из этого выйдет:

<!DOCTYPE html>
<html>
<head>
	<title>Пример скругления границы левого нижнего угла элемента в CSS</title>
<style> 
div {
width: 8em; /* устанавливаем ширину блока */
height: 8em; /* устанавливаем высоту блока */
border: 3px solid red; /* устанавливаем сплошную границу размером 3px красного цвета */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right: 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom: 15px; /* устанавливаем величину отступа от нижнего края элемента */
}
.test {border-bottom-left-radius: 50px;}  /* скругление нижнего левого угла (по типу дуги окружности) */
.test2 {border-bottom-left-radius: 50px 25px;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
.test3 {border-bottom-left-radius: 50px 100px;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
.test4 {border-bottom-left-radius: 30% 30%;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
.test5 {border-bottom-left-radius: 90% 100px;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
</style>
</head>
	<body>
		<div class = "test">50px</div>
		<div class = "test2">50px 25px</div>
		<div class = "test3">50px 100px</div><br>
		<div class = "test4">30% 30%</div>
		<div class = "test5">90% 100px</div>
	</body>
</html>

Результат нашего примера:

Рис. 94 Пример скругления границы левого нижнего угла элемента в CSS.

Мы с Вами рассмотрели 25 базовых свойств, которые вам будут необходимы в повседневной работе с границами элементов. При дальнейшем изучении CSS мы с Вами неоднократно будем возвращаться к этим свойствам.

Вопросы и задачи по теме

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

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующее меню пагинации на странице:

Практическое задание № 22.
Подсказка: подробную информацию о использовании маркированных списков Вы сможете найти в
статье учебника «Работа со списками в CSS». Обратите внимание, что Вам необходимо для элементов <a> (гиперссылка) задать границы, внутренние и внешние отступы, создать стиль при наведении. Подумайте, какие элементы необходимо сделать блочно-строчными, а может какие-то достаточно просто строчными?

Продвинутое задание (составление меню пагинации с закругленными границами у стрелочек):

Практическое задание № 23.
Подсказка: обратите внимание, что в нашем примере все элементы <a> являются первыми дочерними элементами своих родителей, но зато у нас есть как первый, так и последний дочерний элемент <li> внутри своего родителя <ul>. Как нам добраться до элемента <a>, вложенного в первый и последний дочерний <li>? Для этого Вам необходимо составить селектор следующего вида:
```
селектор:псевдокласс селектор {

}	
```
Продвинутое задание (составление меню пагинации с закругленными границами у элементов с различными стилями при наведении):

Практическое задание № 24.
Подсказка: внимательно изучите пример перед выполнением, обратите внимание, что стрелочки при наведении имеют отличный от других элементов <a> стиль.

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

Источник

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Try it

Constituent properties

Syntax

Values

Formal definition

Formal syntax

Examples

Complete border-color usage

HTML

CSS

Result

Specifications

Browser compatibility

See also

border-width – толщина границы

border-style – тип линии

border-color – цвет линии

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

border-radius – закругление углов

border-image – изображение в качестве рамки

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

Синтаксис¶

Значения¶

Спецификации¶

Описание и примеры¶

Краткая информация

Синтаксис

Значения

Песочница

Пример

Объектная модель

Примечание

Спецификация

Браузеры

См. также

Рецепты

Универсальное свойство border

Использование свойств для одиночных границ

Скругление углов элемента.

Вопросы и задачи по теме

Читайте также: