Border solid black 1px: border-width — CSS | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

border-image-slice — CSS | MDN

CSS-свойство border-image-slice делит изображение указанное в border-image-source на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.

Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).

The border-image-repeat, border-image-width, border-image-outset properties define how these images will be used.

The shorthand CSS property border-image (en-US) may reset this property to its default value.

/* border-image-slice: slice */
border-image-slice: 30%;
/* border-image-slice: horizontal vertical */
border-image-slice: 10% 30%;
/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;
/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5;
/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;
/* Глобальные значения */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Значения

slice

Is a <number> or a <percentage> of the offset for the four slicing lines. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to

100%.

horizontal

Is a <number> or a <percentage> of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

vertical

Is a <number> or a <percentage> of the offset for the two vertical slicing lines, the right and the left ones. Note that a

<length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

top

Is a <number> or a <percentage> of the offset for the top slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images.

Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

bottom

Is a <number> or a <percentage> of the offset for the bottom slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

right

Is a <number> or a <percentage> of the offset for the right slicing line.

Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

left

Is a <number> or a <percentage> of the offset for the left slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also,

<percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

fill

Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.

inherit

Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Формальный синтаксис

border-image-slice = 
[ (en-US) <number [0,∞]> | (en-US) <percentage [0,∞]> ] (en-US){1,4} (en-US)  && (en-US)
fill? (en-US)

Specification
Unknown specification # the-border-image-slice

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: 000Z»>13 авг. 2022 г., by MDN contributors

Свойство border-style — стиль границы

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

border-left-style, border-right-style, border-top-style, border-bottom-style.

Синтаксис

селектор { border-style: значение; }

Значения

Значение	Описание
`solid`	Сплошная линия.
`dotted`	Граница в виде точек.
`dashed`	Граница в виде тире.
`ridge`	Граница в виде выпуклой линии.
`double`	Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум `3px`.
`groove`	Вогнутая граница.
`inset`	Вдавленная граница.
`outset`	Выпуклая граница.
`none`	Отсутствие границы.

Значение по умолчанию: none.

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

Количество	Описание
`1`	Тип для всех сторон одновременно.
`2`	Первое значение для верха и низа, второе — для левой и правой границ.
`3`	Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
`4`	Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы.

Пример . Значение solid

<div></div>#elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }

Пример . Значение dotted

<div></div>#elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }

Пример . Значение dashed

<div></div>#elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }

Пример . Значение ridge

<div></div>

#elem {
 border-width: 3px;
 border-style: ridge;
 border-color: black;
 width: 300px;
 height: 100px;
}

Пример .

Значение double

<div></div>#elem { border-width: 3px; border-style: double; border-color: black; width: 300px; height: 100px; }

Пример . Значение groove

<div></div>#elem { border-width: 3px; border-style: groove; border-color: black; width: 300px; height: 100px; }

Пример . Значение inset

<div></div>#elem { border-width: 3px; border-style: inset; border-color: black; width: 300px; height: 100px; }

Пример . Значение outset

<div></div>#elem { border-width: 3px; border-style: outset; border-color: black; width: 300px; height: 100px; }

Пример

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

<div></div>#elem { border-width: 1px; border-style: solid dotted dashed dotted; border-color: black; width: 300px; height: 100px; }

Пример

А сейчас для разных сторон элемента также задана различная толщина границы и ее цвет:

<div></div>#elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }

Пример

Сейчас для верхней и нижней границы задан тип solid, а для правой и левой — dotted:

<div></div>#elem { border-width: 1px; border-style: solid dotted; border-color: black; width: 300px; height: 100px; }

Смотрите также

свойство border-color,
которое задает цвет границы
свойство border-style,
которое задает внешний вид границы
свойство border,
которое является свойством-сокращением для границы

border-radius | CSS | WebReference

Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры

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

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Анимируется	Да

Синтаксис

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

Обозначения

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

Значения

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

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

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

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

Песочница

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

div {
  background: #e4efc7;
  border: 1px solid #333;
  padding: 10px;
  border-radius: {{ playgroundValue }}px;
}

Пример

<!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. Радиусы скругления

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

Объект.style.borderRadius

Примечание

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

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

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

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

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

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

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

Браузеры


Базовый синтаксис	9	12	1	4	10.5	3	5	1	4
Проценты	9	12	4		10.5	5		4
Эллиптические уголки	9	12	1		10. 5	3		3.5


Базовый синтаксис	1	2.1	1	4	10.5	3	5
Проценты	2.1		4		10.5	5
Эллиптические уголки	2.1		3.5		10.5	3

Браузеры

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

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

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

Границы

См. также

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
Круглые изображения

Рецепты

Как добавить рамку к изображению при наведении?
Как добавить скруглённые уголки к картинке?
Как сделать круглые изображения?

Практика

Круглое изображение

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.02.2020

Редакторы: Влад Мержевич

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

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Задайте стиль для границы:

div {border-style: dotted;}

Попробуйте сами »

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

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

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

Примеры:

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

Показать демо ❯

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

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

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

Собственность
с каймой	1,0	4,0	1,0	1,0	3,5

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

Синтаксис CSS

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

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

Подробнее примеры

Пример

Обитая граница:

Div {пограничный стиль: пунктир;}

Попробуйте его самостоятельно »

Пример

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

Div {Border-Style: Стиль: solid;}

Попробуйте сами »

Пример

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

div {border-style: double;}

Попробуйте сами »

Пример

Граница канавки:

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

Попробуйте сами »

Пример

Граница ребра:

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

Попробуйте сами »

Пример

Граница вставки:

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

Попробуйте сами »

Пример

Граница начала:

div {
  стиль границы: начало;
  цвет границы: коралловый;
  border-width: 7px;
}

Попробуйте сами »

Пример

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

p. one {стиль границы: пунктирная сплошная пунктирная двойная;}
p.two {стиль рамки: сплошная точка пунктир;}
p.three {граница: сплошная точка;}
p.four {border-style: dotted;}

Попробуйте сами »

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

Учебник по CSS: Граница CSS

Ссылка на HTML DOM: свойство borderStyle

❮ Назад Полное руководство по CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Примеры границ и правил таблицы

Несколько примеров. Заполнение опущено для ясности. См. также примеры с альтернативным синтаксисом.

Пример 1

Соответствует правилу HTML3=все, граница=1.

 td, th {граница: 1px сплошная}

Пример 2

Второй пример из спецификации HTML3. (интерпретировано из графики ASCII).

 таблица {
    верхняя граница: двойная;
    нижняя граница: двойная;
    граница справа: пусто
}
голова, тело, нога {
    верхняя граница: сплошная;
    нижняя граница: сплошная
}
группа {
    граница справа: сплошная
}

Пример 3

А таблица только с вертикальными линейками.

 столбец {
    граница слева: сплошная;
    граница справа: сплошная
}

Пример 4

Таблица только с вертикальными правилами между столбцами.

 col {граница слева: сплошная}
таблица {граница слева: пусто}

Пример 5

Типичная таблица Netscape: граница=5, ячейки=10.

 таблица {граница: гребень 16px(5,10,1)}
td, th {граница: гребень 12px (1,10,1)}

НБ1. 16 = граница 5 пикселей + интервал 10 пикселей + тень 1 пиксель. Сходным образом, 12 = интервал 10 пикселей + 2 тени.

НБ2. В этом случае удобно указать ребро как 1,10,1, что в сумме равно 12, но 2,20,2 дало бы точно такой же результат.

Пример 6

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

 объявление {
    верхняя граница: сплошная толстая;
    граница справа: пусто; /* предотвратить границу colgroup */
    border-left: пусто /* запретить границу ячейки */
}
colgroup {граница-справа: сплошная толстая}
thead td {граница: сплошная}
tbody td { border: пусто } /* удалить границу colgroup */
}

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

Пример 7

Пример 1 Криса Уилсона в его обозначениях:

 таблица { граница: 2px начало серый / темно-серый; отступ: 1px }
td {граница: тонкая вставка серая / темно-серая; поле: 1px }

В моих обозначениях:

 таблица { граница: 5px ребро (2,2,1) }
td {граница: гребень 4px /* подразумевается: (1,2,1) */ }

Предполагая, что «тонкий» означает 1 пиксель (не слишком маловероятно), граница таблицы будет иметь 2 пикселя тени + 1 пиксел отступа + 1 пиксел поля + 1 пиксел тени = 5 пикселов. Обратите внимание, что я также предполагаю, что цвета теней выбираются автоматически.

Пример 8

Пример Криса Уилсона 2. В его обозначениях:

 таблица { граница: 2px начало серый / темно-серый; отступ: 1px }
tr {граница: тонкая вставка серая / темно-серая; поле: 1px }

В моих обозначениях:

 таблица { граница: 5px ребро (2,2,1) }
tr {граница: ребро 4 пикселя}

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

Пример 9

Пример Криса Уилсона 3. В его обозначениях:

 таблица { граница: 2px начало серый / темно-серый; отступ: 4px }
td {граница: тонкая вставка серая / темно-серая; поле: 4px }

В моих обозначениях:

 таблица {граница: гребень 11px(2,8,1)}
td {граница: гребень 10px (1,8,1)}

Пример 10

Пример Криса Уилсона 4. В его обозначениях:

 таблица {граница: 2px одинарная черная}
td {граница: тонкий одиночный черный коллапс }

В моих обозначениях:

 таблица { граница: 2 пикселя сплошная черная }
td {граница: тонкая сплошная черная}

Пример 11

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

 таблица { граница: тонкая тень (толстая) }
td {граница: тонкая пунктирная}
#G {граница: переопределение тонкой тени (толстой) }

Предполагается, что ячейка G имеет идентификатор `G’. Ключевое слово «переопределить» используется, чтобы убедиться, что стиль границы ячейки соблюдается. Если тени всегда сильнее, чем точки, это ключевое слово можно опустить.

Пример 12

Разница в цвете между границей и ячейкой является проблемой. Может можно решить несколькими способами: (1) в HTML, поместив содержимое ячейки внутрь другой элемент, такой как P или DIV, и наложение на него фона, или (2) ввести свойство border-background или (3) указать, что таблица фон используется для фона границы.

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

Используя решение 2 (установите желтый цвет на дочерних элементах ячеек):

 корпус {фон: розовый}
таблица { граница: нет }
td {граница: 5 пунктов, зеленая точка (8 пунктов, 0,8)}
td p {фон: желтый}

Используя решение 3 (фон таблицы используется для границ):

 корпус {фон: розовый}
таблица { граница: нет }
td {граница: 5pt, зеленая точка (8pt.0.8)}
td {фон: желтый}

Используя модель Дэйва:

 корпус {фон: розовый}
стол {
    правила: все;
    стиль правила: пунктирный;
    цвет правила: зеленый;
    ширина правила: 5pt
}
тд {
    поля: 2pt;
    фон: желтый
}

Пример 13

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

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

Попытка использования модели Дэйва:

 стол {
    правила: все;
    правило-стиль: сплошная точка;
    ширина правила: 5pt 2pt;
    цвет правила: зеленый белый;
    /* Как подавить правило под thead? */
}
объявление тд {
    стиль границы: нет, нет, сплошной, нет;
    ширина границы: толстая;
    цвет границы: красный;
    поле: 4pt;
}

Попытка использования моей модели:

 столбец {
    граница слева: 5 пунктов зеленый с точками;
    граница справа: 5 пт с зелеными точками;
}
tbody тр {
    верхняя граница: сплошной белый 3pt
}
объявление тд {
    /* Вводим `короткий' стиль */
    нижняя граница: 5pt короткий (4pt) сплошной красный
}

Пример 14

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

 td {граница: тонкая сплошная}
thead { сдвиг: -30 }
thead td { вращение текста: 90 }

Пример 15

Есть несколько способов взглянуть на эту таблицу: (1) на самом деле это две таблицы вместо одного, (2) есть пространство между головой и туловищем, (3) между голова и тело представляют собой двойную линию.

Border solid black 1px: border-width — CSS | MDN

border-image-slice — CSS | MDN

Значения

Формальный синтаксис

Свойство border-style — стиль границы

Синтаксис

Значения

Количество значений

Пример . Значение solid

Пример . Значение dotted

Пример . Значение dashed

Пример . Значение ridge

Пример .

Пример . Значение groove

Пример . Значение inset

Пример . Значение outset

Пример

Пример

Пример

Смотрите также

border-radius | CSS | WebReference

Синтаксис

Обозначения

Значения

Песочница

Пример

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

Примечание

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

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

Браузеры

Браузеры

См. также

Рецепты

Практика

Автор и редакторы

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

Пример

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

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

Синтаксис CSS

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

Подробнее примеры

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

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

ВЫБОР ЦВЕТА

КОД ИГРЫ

Top Tutorials

Основные примеры

Примеры границ и правил таблицы

Пример 1

Пример 2

Пример 3

Пример 4

Пример 5

Пример 6

Пример 7

Пример 8

Пример 9

Пример 10

Пример 11

Пример 12

Пример 13

Пример 14

Пример 15

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

Рубрики