Содержание

border — CSS | MDN

Свойство CSS border это  универсальное свойство для указания всех персональных свойств границ за раз: border-width, border-style (en-US), и border-color (en-US).

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none.

border: 1px;
border: 2px dotted;
border: medium dashed green;

 

Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width, border-style (en-US), и border-color (en-US)  принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Свойство border  указывается используя одно или более значений <br-width>, <br-style>, и <color> указанных ниже.

Значения

<br-width>
Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width.
<br-style>
Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).
<color>
Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

<line-width> || (en-US) <line-style> || (en-US) <color>

где
<line-width> = <length> | (en-US) thin | (en-US) medium | (en-US) thick
<line-style> = none | (en-US) hidden | (en-US) dotted | (en-US) dashed | (en-US) solid | (en-US) double | (en-US) groove | (en-US) ridge | (en-US) inset | (en-US) outset
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )

где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

HTML

<div>Look at my borders. </div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;
  }
</style>

CSS

style {
  display: block;
  border: 1px dashed black;
}

Результат

BCD tables only load in the browser

border-color | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии CSS

Описание

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

Синтаксис

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>
   h2 { 
    border-color: red white; /* Цвет границы */ 
    border-style: solid; /* Стиль границы */  
   }
   p { 
    border-color: #008a77; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  
  <h2>Lorem ipsum dolor sit amet</h2>
  <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.

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

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

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификациюhttp://www. w3.org/TR/css3-background/#the-border-radius

Версии CSS

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

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

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

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0. 5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

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

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

border-spacing | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

Версии CSS

Описание

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Синтаксис

border-spacing: значение1 [значение2]

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
   table {
    border: 4px double #333; /* Рамка вокруг таблицы */ 
    border-collapse: separate; /* Способ отображения границы */ 
    width: 100%; /* Ширина таблицы */ 
    border-spacing: 7px 11px; /* Расстояние между ячейками */ 
   }
   td {
    padding: 5px; /* Поля вокруг текста */ 
    border: 1px solid #a52a2a; /* Граница вокруг ячеек */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>1</td><td>2</td>
   </tr>
   <tr>
    <td>3</td><td>4</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 1. Применение свойства border-spacing

Браузеры

Если к тегу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется. Исключением из этого правила является браузер Internet Explorer до версии 7.0 включительно, который не понимает свойство border-spacing.

Свойство border | CSS справочник

CSS свойства

Определение и применение

CSS свойство border позволяет установить все свойства границ в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

  • ширина границы — border-width (medium | thin | thick | length | initial | inherit).
  • стиль границы — border-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
  • цвет границы — border-color (color | transparent | initial | inherit).

Поддержка браузерами

CSS синтаксис:

border:"border-width border-style border-color | initial | inherit";

JavaScript синтаксис:

object.style.border="2px solid orange"

Значения свойства

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

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

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

Borders CSS уроки для начинающих академия


Свойства границы CSS

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

У меня есть границы со всех сторон.

У меня есть красная Нижняя граница.

У меня округлые границы.

У меня синяя левая граница.


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

Свойство border-style указывает тип отображаемой границы.

Допустимы следующие значения:

  • dotted — Определяет пунктирную границу
  • dashed — Определяет пунктирную границу
  • solid — Определяет сплошную границу
  • double — Определяет двойную границу
  • groove — Определяет 3D канавку границы. Эффект зависит от значения цвета границы
  • ridge — Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы
  • inset — Определяет 3D-вставку границы. Эффект зависит от значения цвета границы
  • outset — Определяет трехмерную границу начала. Эффект зависит от значения цвета границы
  • none — Не определяет границы
  • hidden — Определяет скрытую границу

Свойство 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;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

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



Ширина границы

Свойство border-width задает ширину четырех границ.

Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.

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

5px 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 используется для задания цвета четырех границ.

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

  • Name-укажите имя цвета, например «Red»
  • Hex-укажите шестнадцатеричное значение, например «#ff0000»
  • RGB-укажите RGB-значение, например «RGB (255, 0, 0)»
  • Прозрачный

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

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

Red border

Пример

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 есть также свойства для указания каждой из границ (верхняя, правая, Нижняя и левая):

Different Border Styles

Пример

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

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

Пример

p {
   
border-style: dotted solid;
}

Итак, вот как это работает:

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

  • стиль границы: пунктирная Сплошная двойная пунктирная;
    • Верхняя граница пунктирная
    • Правая граница сплошная
    • Нижняя граница двойная
    • Левая граница пунктирная

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

  • Пограничный стиль: точечный сплошной двойной;
    • Верхняя граница пунктирная
    • правая и левая границы являются сплошными
    • Нижняя граница двойная

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

  • граница стиля: пунктирная твердая;
    • верхние и нижние границы пунктирные
    • правая и левая границы являются сплошными

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

  • граница стиля: пунктирная;
    • все четыре границы пунктирные

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


Граница-Сокращенное свойство

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

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

Свойство border является сокращенным свойством для следующих отдельных свойств границы:

  • border-width
  • border-style (required)
  • border-color

Пример

p {
   
border: 5px solid red;
}

Result:

Можно также указать все свойства отдельных границ только для одной стороны:

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

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

Result:

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

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

Result:


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

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

Normal border

Round border

Rounder border

Roundest border

Пример

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

Note: The border-radius property is not supported in IE8 and earlier versions.


Другие примеры

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

Задание стиля нижней границы
В этом примере демонстрируется установка стиля нижней границы.

Задание ширины левой границы
В этом примере показано, как задать ширину левой границы.

Установка цвета четырех границ
В этом примере демонстрируется установка цвета четырех границ. Он может иметь от одного до четырех цветов.

Установка цвета правой границы
В этом примере демонстрируется установка цвета правой границы.



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

СвойствоОписание
borderЗадает все свойства границы в одном объявлении
border-bottomЗадает все свойства нижней границы в одном объявлении
border-bottom-colorЗадает цвет нижней границы
border-bottom-styleЗадает стиль нижней границы
border-bottom-widthЗадает ширину нижней границы
border-colorЗадает цвет четырех границ
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-styleЗадает стиль верхней границы
border-top-widthЗадает ширину верхней границы
border-widthЗадает ширину четырех границ

border-style — стили рамок | CSS справочник

Поддержка браузерами



12. 0+4.0+1.0+1.0+3.5+1.0+

Описание

CSS свойство border-style устанавливает стиль рамки для элемента. Можно использовать от 1 до 4 значений. Стиль устанавливается начиная с верхней позиции. Если задано два стиля подряд, это значит первое значение для верхней и нижней рамки, второе значение для правой и левой рамки.

  • border-style: dotted solid double dashed;
    • Верхняя рамка — точечная
    • Правая рамка — сплошная
    • Нижняя рамка — двойная
    • Левая рамка — пунктирная

  • border-style: dotted solid double;
    • Верхняя рамка — точечная
    • Правая и левая рамка — сплошные
    • Нижняя рамка — двойная


  • border-style: dotted solid;
    • Верхняя и нижняя рамка — точечные
    • Правая и левая рамка — сплошные

  • border-style: dotted;
    • Все четыре рамки — точечные







Значение по умолчанию:none
Применяется:ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется:нет
Наследуется:нет
Версия:CSS1
Синтаксис JavaScript:object. style.borderStyle=»dotted double»

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;

Значения свойства













ЗначениеОписание
noneУказывает, что рамка отсутствует.
hiddenТоже самое что и значение «none».
dottedТочечная рамка.
dashedПунктирная рамка.
solidСплошная рамка.
doubleДвойная рамка.
grooveОбъемная рифленая вдавленная рамка.
ridgeОбъемная рифленая выпуклая рамка.
insetОбъемная вдавленная рамка.
outsetОбъемная выпуклая рамка.
inheritУказывает, что значение наследуется от родительского элемента.

Пример


div {

border-width: 5px;
border-style: none;

}

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

Пример

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

h2 {
граница: 5 пикселей сплошной красный;
}

h3 {
граница: 4 пикселя, пунктирная синяя;
}

дел {
граница:
двойной;
}

Попробуй сам »


Определение и использование

Граница Свойство является сокращенным свойством для:

Если цвет границы опущен, применяется цвет текста.

Значение по умолчанию: средний нет цвет
Унаследовано: нет
Анимируемое: да, посмотреть отдельные свойства . Прочитать про animatable
Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.border = «3px сплошной синий»
Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
граница 1,0 4,0 1,0 1,0 3,5

Синтаксис CSS

граница: ширина границы стиль границы цвет границы | начальный | наследование;

Стоимость объекта

.

Значение Описание
ширина рамки Задает ширину границы. Значение по умолчанию — «средний»
бордюрный Задает стиль границы. Значение по умолчанию — «нет»
цвет рамки Задает цвет границы. Значение по умолчанию — цвет
текст
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные
унаследовать Наследует это свойство от своего родительского элемента.Читать про наследство

Связанные страницы

Учебник

CSS: Граница CSS

Учебник

CSS: модель коробки CSS

Ссылка на HTML DOM: свойство границы

CSS свойство стиля границы

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Свойство border-style устанавливает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.

Примеры:

  • обрамление: сплошная пунктирная двойная пунктирная;
    • верхняя граница пунктирная
    • правая граница сплошная
    • нижняя граница двойная
    • левая граница пунктирная

  • обрамление: сплошная двойная пунктирная линия;
    • верхняя граница пунктирная
    • правая и левая границы сплошные
    • нижняя граница двойная

  • стиль границы: сплошная пунктирная линия;
    • верхняя и нижняя границы пунктирные
    • правая и левая границы сплошные

  • стиль границы: пунктирная;
    • все четыре границы пунктирны
Значение по умолчанию: нет
Унаследовано: нет
Анимируемое: нет.Прочитать про animatable
Версия: CSS1
Синтаксис JavaScript: объект . style.borderStyle = «двойной пунктир»
Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
с бордюром 1.0 4,0 1,0 1,0 3,5

Примечание: Значение «скрытый» не поддерживается в IE7 и более ранних версиях. IE8 требует! DOCTYPE. IE9 и более поздние версии поддерживают «скрытый».



Синтаксис CSS

стиль границы: нет | скрытый | пунктирный | пунктирный | сплошной | двойной | канавка | гребень | вставка | начало | начальный | наследование;

Стоимость объекта

Значение Описание Играй
нет Значение по умолчанию. Без рамки Играй »
скрыто То же, что «нет», за исключением пограничного конфликта.
разрешение элементов стола
Играй »
с точками Определяет пунктирную границу Играй »
штриховая Определяет пунктирную границу. Играй »
цельный Задает сплошную границу Играй »
двойной Задает двойную границу Играй »
паз Задает трехмерную рифленую границу.Эффект зависит от
значение цвета границы
Играй »
гребень Задает трехмерную ребристую границу. Эффект зависит от
значение цвета границы
Играй »
вставка Задает границу вставки 3D. Эффект зависит от
значение цвета границы
Играй »
начало Задает исходную трехмерную границу.Эффект зависит от
значение цвета границы
Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Граница паза:

div {
стиль границы: канавка;
бордюрный цвет: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам »

Пример

Бордюр гребня:

div {
стиль границы: гребень;
бордюрный цвет: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам »

Пример

Внутренний бордюр:

div {
стиль границы: вставка;
бордюрный цвет: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам »

Пример

Начальная граница:

div {
border-style: начало;
бордюрный цвет: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам »

Пример

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

п.один {border-style: пунктирная сплошная пунктирная двойная;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted; }

Попробуй сам »


Связанные страницы

Учебник

CSS: Граница CSS

Ссылка

HTML DOM:
borderStyle свойство

CSS Границы


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


У меня бордюры со всех сторон.

У меня красная нижняя граница.

У меня синяя левая граница.


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

Свойство стиля границы определяет, какой тип границы отображать.

Допускаются следующие значения:

  • пунктирная — Определяет пунктирную границу
  • пунктир — определяет пунктирную границу
  • solid — определяет сплошную границу
  • double — определяет двойную границу
  • канавка — Определяет трехмерную рифленую границу.Эффект зависит от значения цвета границы
  • .

  • гребень — Определяет трехмерную гребенчатую границу. Эффект зависит от значения цвета границы
  • .

  • вставка — Определяет границу вставки 3D. Эффект зависит от значения цвета границы
  • .

  • начало — Определяет исходную трехмерную границу. Эффект зависит от значения цвета границы
  • .

  • нет — не определяет границы
  • скрытая — Определяет скрытую границу

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

Пример

Демонстрация различных стилей границ:

p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
стр. канавка {border-style: groove;}
стр. гребень
{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;}

Результат:

Пунктирная граница.

Пунктирная граница.

Сплошная рамка.

Двойная рамка.

Кайма паза. Эффект зависит от значения цвета границы.

Бордюр коньковый. Эффект зависит от значения цвета границы.

Внутренний бордюр. Эффект зависит от значения цвета границы.

Начальная граница. Эффект зависит от значения цвета границы.

Без границы.

Скрытая граница.

Смешанная граница.

Попробуй сам »

Примечание: Ни одно из ДРУГИХ свойств границы CSS (о которых вы узнаете больше в следующих главах) не будет иметь ЛЮБОГО эффекта, если только
border-style свойство установлено!

border — CSS: Cascading Style Sheets

Это свойство является сокращением для следующих свойств CSS:

 
граница: сплошная;


граница: 2 пикселя с точками;


граница: outset # f33;


граница: средне-пунктирная зеленая;


граница: наследование;
граница: начальная;
граница: не задана;
  

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

Примечание: Граница будет невидимой, если ее стиль не определен. Это потому, что по умолчанию используется стиль , а не .

Значения

<ширина линии>

Устанавливает толщину границы. По умолчанию средний , если отсутствует. См. border-width .

<стиль-линия>

Задает стиль границы.По умолчанию нет , если отсутствует. См. стиль границы .

<цвет>

Задает цвет границы. По умолчанию текущий цвет , если он отсутствует. См. цвет границы .

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

Граница Сокращение особенно полезно, если вы хотите, чтобы все четыре границы были одинаковыми. Однако, чтобы сделать их отличными друг от друга, вы можете использовать свойства longhand border-width , border-style и border-color , которые принимают разные значения для каждой стороны. В качестве альтернативы вы можете настроить таргетинг на одну границу за раз с помощью физических (например, border-top ) и логических (например, border-block-start ) свойств границы.

Границы и очертания

Границы и очертания очень похожи. Однако контуры отличаются от границ следующим образом:

  • Контуры никогда не занимают места, поскольку они рисуются вне содержимого элемента.
  • Согласно спецификации, очертания не обязательно должны быть прямоугольными, хотя обычно они и есть.
 <ширина-строки> || <стиль-линия> || <цвет> 

, где
<ширина строки> = <длина> | тонкий | средний | толстый
<стиль-линия> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | исход
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>

где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)

, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |

Установка розовой начальной границы

HTML
  
У меня есть рамка, контур и тень блока! Удивительно, не правда ли?
CSS
  div {
  граница: 0.5rem начальный розовый;
  наброски: твердый хаки 0,5 бермуды;
  box-shadow: 0 0 0 2рем небесно-голубой;
  радиус границы: 12 пикселей;
  шрифт: полужирный 1rem без засечек;
  маржа: 2бэр;
  набивка: 1 бэр;
  смещение контура: 0,5 бэр;
}
  
Результат

Таблицы BCD загружаются только в браузере

border | CSS-уловки

Свойство border — это сокращенный синтаксис в CSS, который принимает несколько значений для рисования линии вокруг элемента, к которому оно применяется.

  .box {
  граница: сплошной красный цвет 3px;
  высота: 200 пикселей;
  ширина: 200 пикселей;
}  

Значения

Граница Свойство принимает одно или несколько из следующих значений в комбинации:

  граница: || ||  
    • border-width : определяет толщину границы.
      • : числовое значение, измеренное в единицах px , em , rem , vh и vw .
      • тонкий : эквивалент 1px
      • средний : эквивалент 3px
      • толщиной : эквивалент 5px
    • border-style : определяет тип линии, нарисованной вокруг элемента, включая:
      • сплошная : сплошная непрерывная линия.
      • нет (по умолчанию): линия не рисуется.
      • скрыто : линия нарисована, но не видна. это может быть удобно для добавления небольшой дополнительной ширины к элементу без отображения границы.
      • пунктир : линия, состоящая из тире.
      • пунктирная : линия, состоящая из точек.
      • двойной : вокруг элемента нарисованы две линии.
      • канавка : добавляет фаску на основе значения цвета таким образом, чтобы элемент казался вдавленным в документ.
      • гребень : Подобен канавке , но меняет значения цвета на противоположные таким образом, чтобы элемент выглядел приподнятым.
      • вставка : Добавляет разделенный тон к линии, из-за чего элемент выглядит слегка вдавленным.
      • начало : аналогично вставке , но меняет цвета так, чтобы элемент выглядел слегка приподнятым.
    • цвет : определяет цвет границы и принимает значения & lt; rgb () & gt; & lt; / rgb () & gt; , & lt; rgba () & gt ;, & lt; hsl () & gt; & lt; / hsl () & gt; , & lt; hsla () & gt; & lt; / hsla () & gt; , , , текущий цвет и

<код>

Уф, это много ценностей для одной маленькой собственности! Вот демонстрация, демонстрирующая различия между всеми этими значениями стиля:

<код>

См. CSS-границу Pen от Джеффа Грэма (@geoffgraham) на CodePen.

<код>

Поддержка браузера

<код>

Вы можете рассчитывать на отличную поддержку свойства border во всех браузерах.

<код>

Хром Safari Firefox Opera IE Android iOS
Любая Любая Любая 3.5+ 4+ Любая Любая

<код>

Сопутствующие объекты

<код>

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

<код>

  • border-collapse : Задает интервал между границами на элементе .
  • border-image : позволяет использовать изображение для рисования границы вместо сплошного цвета.
  • border-radius : управление закругленными углами.


  • Дополнительная информация

    <код>

Как использовать сокращенное свойство границы CSS

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

  1. Сокращенное обозначение границы выглядит следующим образом:
      селектор {
    граница: ширина границы, стиль границы, цвет границы;
    }  
  2. Вы также можете применить сокращение для border индивидуально к border-top , border-right , border-bottom и border-left . Например, следующий синтаксис демонстрирует сокращенную структуру, применяемую к свойству border-top :
      селектор {
    верхняя граница: ширина границы стиль границы цвет границы;
    }  

    Начальные значения CSS для свойства border показаны в следующей таблице:

    Свойство Начальное значение
    border-width medium
    border-style none
    border-color унаследовано от цвет свойство
  3. В дополнение к свойству border существует несколько других сокращенных свойств, как указано в предыдущей таблице.Это цвет границы , стиль границы и ширина границы . Их структура отличается от границы собственности . Структура фактически аналогична свойствам margin и padding в том, что вы устанавливаете значение для каждой стороны, как показано в следующем синтаксисе.
      селектор {
    цвет границы: верхний правый нижний левый;
    стиль границы: верхний правый нижний левый;
    ширина границы: верхний правый нижний левый;
    }  
  4. В следующем примере демонстрируется использование сокращенного свойства border :
      
    
    
    
     Сокращение границ CSS %MINIFYHTMLa0dac7eed62451a7cfd84ef1ebe052ed15%
    
    
    
    Граница вокруг этого текста будет сплошной синей шириной 1 пиксель.
    В рамке вокруг этого текста используется сокращение для каждой стороны.
    Рамка вокруг этого текста будет использовать начальные значения цвета и ширины.
    Граница не будет отображаться, поскольку стиль границы не установлен.

    Этот код отображает следующее:

Базовый CSS: границы в CSS

Урок 11: Границы в CSS

/ en / basic-css / padding-in-css / content /

Границы в CSS

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

Пограничная декларация

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

 граница: сплошная черная, 3 пикселя; 

Это объявление означает, что поле заполнения должно иметь размер , окруженный сплошной черной рамкой толщиной 3 пикселя, . Например, рассмотрим элемент

с некоторым текстом, некоторыми объявлениями цвета и объявлением padding .На веб-странице это может выглядеть так:

Если бы вы добавили простое объявление border , подобное приведенному выше, вы бы увидели следующее:

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

  • Стиль : тип отображаемой границы.Большинство границ, которые вы увидите и будете использовать, будут иметь вид сплошной , но CSS может создавать другие стили, такие как пунктирные границы и пунктирные границы . Объявление в стиле границы может определять его индивидуально.
  • Ширина : толщина границы. Обычно вы видите значение, данное в пикселей , а объявление border-width может определять его индивидуально.
  • Цвет : цвет границы. Вы можете использовать именованных цветов или шестнадцатеричных кодов , так же, как вы это делаете для объявлений color или background-color .Объявление border-color может определять его индивидуально.
Бордюр закругленный

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

Например, вы можете слегка закруглить углы с помощью параметра border-radius: 10px; :

Или вы можете использовать больший радиус, например border-radius: 100px; для создания формы таблетки:

При работе с квадратными элементами можно использовать border-radius: 50%; для создания круга:

Несмотря на название, border-radius можно использовать и без рамки:

Попробуй!

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

 цвет фона: # 15AAD7;
цвет белый;
отступ: 10 пикселей;
граница: сплошная 3px # 0F7391;
 

Селектор для набора правил уже определен для вас и нацелен на абзац справа от него.После того, как вы попробуете эти объявления, попробуйте самостоятельно изменить некоторые значения . Например, попробуйте изменить значение «сплошной» в объявлении границы на «пунктирная» или «пунктирная» или попробуйте изменить значение ширины.

Сделай сам!

Откройте файл styles.css в проекте GCF Programming Tutorials в текстовом редакторе, и давайте добавим границы. Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его.

  1. Наконец, давайте сделаем эту кнопку немного лучше. Поскольку это кнопка, у нее есть рамка по умолчанию, но давайте сделаем ее лучше. Добавьте это к кнопке . Набор правил :
     border: solid 2px # 1B7530;
    радиус границы: 50 пикселей; 
  2. Необязательно: попробуйте изменить стиль, ширину и цвет границы, чтобы увидеть, как это повлияет на кнопку. Вы также можете изменить цвет и цвет фона для кнопки, чтобы попробовать разные цветовые комбинации.

Если вы загрузите свой index.