border-top-style | htmlbook.ru
| 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#border-style-properties |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает стиль границы сверху элемента.
Синтаксис
border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Значения
- none
- Линия не отображается и значение ее толщины обнуляется.
- hidden
- Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае верхняя граница в ячейке не будет отображаться вообще.
- dotted
- Линия состоящая из набора точек.
- dashed
- Пунктирная линия, состоящая из серии коротких отрезков.
- solid
- Сплошная линия.
- double
- Двойная линия.
- groove
- Создает эффект вдавленной линии.
- ridge
- Создает эффект рельефной линии.
- inset
- Псевдотрехмерная линия.
- outset
- Псевдотрехмерная линия.
- inherit
- Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border-top-style</title>
<style>
h2 {
border-top-color: #800000; /* Цвет линии сверху */
border-top-style: double; /* Стиль линии сверху */
border-top-width: 7px; /* Толщина линии сверху */
border-left-color: #bd0000; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 2px; /* Толщина линии */
padding: 7px; /* Поля вокруг текста */
}
</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.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html> 
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства border-top-style
Объектная модель
[window.]document.getElementById(«elementID»).style.borderTopStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
Границы
css властивість border-top-color
- Головна
- css
- властивості
- border-top-color
Властивість border-top-color встановлює колір верхньої межі елементу.
Ви також можете використовувати border-color, щоб задати колір для всіх меж, або border-top, щоб встановити ширину, стиль та колір для верхньої межі у скороченому записі.
Значення без задання currentColor (який дорівнює властивості color).
| Нотатка: | Перед тим як межа може бути показана, вона мусить мати встановлене
значення для |
| Порада: | Рекомендується використовувати скорочені записи за допомогою |
Запропонувати свою пораду чи нотатку
ПорадаНотатка
Синтакс
border-top-color: color|transparent|initial|inherit;
Властивість border-top-color може отримувати 4 значення:
colorВстановлює колір кордону.
Колір в CSS можна задавати різними способами: по шістнадцятиричному коду, за назвою чи в форматі RGB, RGBA, HSL, HSLAtransparentВстановлює прозорий колір
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
Колір в CSS можна задавати різними способами: по шістнадцятиричному коду, за назвою чи в форматі | Значення без задання: | Поточний колір елемента |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderTopColor=»blue» |
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-top-color | 1. | 4.0 | 1.0 | 1.0 | 3.5 |
| Переглядач | |||
|---|---|---|---|
| border-top-color | 1.0 | 1.0 | 1.0 |
Приклади
- Приклад 1
- Приклад 2
- Приклад 3
- Приклад 4
- Приклад 5
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Встановлення кольору верхнього кордону.
p {
border-style: solid;
border-top-color: #ff0000;
}Додаткові посилання
border-style
border-radius
border
border-bottom-left-radius
border-top-right-radius
border-bottom-right-radius
border-top-left-radius
border-top
border-bottom
border-spacing
border-right-width
border-left-width
border-right
border-left
border-right-style
border-left-style
border-top-style
border-bottom-style
border-right-color
border-left-color
border-bottom-color
border-color
border-top-width
border-bottom-width
border-collapse
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-width
CSS | свойство border-top-color — GeeksforGeeks
Улучшить статью
Сохранить статью
- Последнее обновление: 02 Авг, 2022
Улучшить статью
Сохранить статью
свойство border-color используется для окраски всей границы контейнера одним цветом.
свойство border-top-color обеспечивает возможность заливки цветом, отличным от родительского цвета границы, до верхней границы контейнера.
Синтаксис:
border-top-color: color|transparent|initial|inherit;
Значение по умолчанию: Текущий цвет элемента
Значения свойств:
color: Задает цвет верхней границы элемента.
Синтаксис:
Пограничная точка: Color
Пример:
0003Output:
Transparent: It specify the transparent value of верхняя граница.
Синтаксис:
border-top-color:transparent;
Пример:
html
|
начальное значение: Устанавливает для свойства значение по умолчанию.
Синтаксис:
border-top-color:initial;
Example:
html
Output: Поддерживаемые браузеры: Браузеры, поддерживаемые свойством css border-top-color , перечислены ниже:
Publisher для Microsoft 365 Publisher 2021 Publisher 2019 Publisher 2016 Publisher 2013 Publisher 2010 Publisher 2007 Дополнительно.
Эффекты заливки — выберите этот параметр, чтобы открыть диалоговое окно «Эффекты заливки», в котором можно применять такие эффекты заливки, как градиенты, текстуры, узоры, заливки изображениями и оттенки. Прозрачность - Введите процент прозрачности в поле Прозрачность или используйте ползунок, чтобы установить прозрачность заливки. Эта опция доступна, только если вы выбрали какую-либо заливку. Изменить линии и границы
 org/ListItem">Цвет -Выберите нужный цвет заливки из палитры или выберите один из вариантов в списке:  org/ListItem">Дополнительные цвета — щелкните этот параметр, чтобы открыть диалоговое окно «Цвета». Вы можете выбрать новый цвет из стандартной цветовой палитры или выбрать собственный цвет, который можно определить с помощью цветовой модели RGB, HSL или CMYK. Вы также можете выбрать цвет PANTONE®. Примечание. Цвета PANTONE®, представленные здесь, могут не соответствовать стандартам, установленным PANTONE. Обратитесь к текущим публикациям по цветам PANTONE для точного определения цвета. PANTONE® и другие товарные знаки Pantone, Inc. являются собственностью Pantone, Inc. © Pantone, Inc., 2007. Толщина - Введите толщину линии. Этот параметр недоступен, если выбран параметр Нет цвета .  |
; 
.. Меньше
