- border
- Синтаксис
- Значения
- Обычный синтаксис
- Примеры
- HTML
- CSS
- Результат
- Спецификация
- Совместимость браузеров
- Также смотрите
- Found a content problem with this page?
- Css тип линии border
- Свойство border
- Радиус границы
- CSS Borders
- CSS Border Style
- Example
- Все о свойстве border
- Основы
- Border-Radius
- Несколько границ
- Изменение углов
- CSS фигуры
- Создание Speech Bubble
- Итог
border
Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, 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 указывается используя одно или более значений , , и указанных ниже.
Значения
Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .
Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).
Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).
Обычный синтаксис
border =
|| (en-US)
|| (en-US)
=
| (en-US)
thin | (en-US)
medium | (en-US)
thick
=
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
Примеры
HTML
div class="fun-border">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; >
Результат
Спецификация
- border-width : как и у каждого из подсвойств этого свойства:
- border-top-width (en-US): medium
- border-right-width (en-US): medium
- border-bottom-width (en-US): medium
- border-left-width (en-US): medium
- border-top-style (en-US): none
- border-right-style (en-US): none
- border-bottom-style (en-US): none
- border-left-style (en-US): none
- border-top-color (en-US): currentcolor
- border-right-color (en-US): currentcolor
- border-bottom-color (en-US): currentcolor
- border-left-color (en-US): currentcolor
- border-width : как и у каждого из подсвойств этого свойства:
- border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
- border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
- border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
- border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
- border-bottom-style (en-US): как указано
- border-left-style (en-US): как указано
- border-right-style (en-US): как указано
- border-top-style (en-US): как указано
- border-bottom-color (en-US): вычисленный цвет
- border-left-color (en-US): вычисленный цвет
- border-right-color (en-US): вычисленный цвет
- border-top-color (en-US): вычисленный цвет
- border-color (en-US): как и у каждого из подсвойств этого свойства:
- border-bottom-color (en-US): цвет
- border-left-color (en-US): цвет
- border-right-color (en-US): цвет
- border-top-color (en-US): цвет
- border-bottom-width (en-US): длина
- border-left-width (en-US): длина
- border-right-width (en-US): длина
- border-top-width (en-US): длина
Совместимость браузеров
BCD tables only load in the browser
Также смотрите
Found a content problem with this page?
This page was last modified on 11 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Css тип линии border
Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.
Для настройки границы могут использоваться сразу несколько свойств:
- border-width : устанавливает ширину границы
- border-style : задает стиль линии границы
- border-color : устанавливает цвет границы
Свойство border-width может принимать следующие типы значений:
- Значения в единицах измерения, таких как em, px или cm
Свойство border-color в качестве значения принимает цвет CSS:
Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:
- none : граница отсутствует
- solid : граница в виде обычной линии
- dashed : штриховая линия
- dotted : линия в виде последовательности точек
- double : граница в виде двух параллельных линий
- groove : граница имеет трехмерный эффект
- inset : граница как бы вдавливается во внутрь
- outset : аналогично inset, только граница как бы выступает наружу
- ridge : граница также реализует трехмерный эффект
div
При необходимости мы можем определить цвет, стиль и ширину границы для каждой из сторон используя следующие свойства:
/* для верхней границы */ border-top-width border-top-style border-top-color /* для нижней границы */ border-bottom-width border-bottom-style border-bottom-color /* для левой границы */ border-left-width border-left-style border-left-color /* для правой границы */ border-right-width border-right-style border-right-color
Свойство border
Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border :
Для установки границы для отдельных сторон можно использовать одно из свойств:
border-top border-bottom border-left border-right
Их использование аналогично:
Радиус границы
Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.
div
Теперь каждый угол будет скругляться по радиусу в 30 пикселей:
Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:
border-radius: 15px 30px 5px 40px;
Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:
border-top-left-radius: 15px; /* радиус для верхнего левого угла */ border-top-right-radius: 30px; /* радиус для верхнего правого угла */ border-bottom-right-radius: 5px; /* радиус для нижнего левого угла */ border-bottom-left-radius: 40px; /* радиус для нижнего правого угла */
Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:
В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element’s border.
I have borders on all sides.
I have a red bottom border.
I have a blue left border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
- dotted — Defines a dotted border
- dashed — Defines a dashed border
- solid — Defines a solid border
- double — Defines a double border
- groove — Defines a 3D grooved border. The effect depends on the border-color value
- ridge — Defines a 3D ridged border. The effect depends on the border-color value
- inset — Defines a 3D inset border. The effect depends on the border-color value
- outset — Defines a 3D outset border. The effect depends on the border-color value
- none — Defines no border
- hidden — Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
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.
Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!
Все о свойстве border
Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?
Основы
border-width: thick; border-style: solid; border-color: black;
Например у параметра border-width есть три параметра: thin, medium, thick:
Если необходимо менять цвет границы при наведении на объект:
Border-Radius
border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Для каждого угла можно назначить свое закругление:
border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;
Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.
Несколько границ
Border-Style
solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.
border: 20px groove #e3e3e3;
border-color: #e3e3e3; border-width: 20px; border-style: groove;
Outline
Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.
Псевдоэлементы
.box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before
Возможно это не самое элегантное решение, однако оно работает
Box-Shadow
Изменение углов
border-radius: 50px / 100px; /* horizontal radius, vertical radius */
border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:
CSS фигуры
Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:
А теперь оставляем только синий треугольник:
Создание Speech Bubble
Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:
Оставляем только четверть квадратика:
Теперь перемещаем ниже и закрашиваем:
.speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >
Примеры применения:
/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
Hi there*/ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:afterВертикальное центрирование текста
минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:
.speech-bubble < /* other styles */ display: table; >.speech-bubble p
Еще один пример нестандартного использования границ:
Итог
Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.