background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-ms-radial-gradient
background-position-x
background-position-y
---------------
filter
hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила
@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации
A
#id
.class
.class1.class2
*
A B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы
::after (:after)
::before (:before)
::first-letter
::first-line
::selection
---------------
Функции
attr()
calc()
---------------
Значения свойств
Строки
Числа
Проценты
Размер
Адрес
Цвет
Угол
Медиа-запросы
inherit
initial
Помогли мы вам |
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>
h1 {
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>
<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.
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.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
- © border-right-style
- © border-right-color
- © border-right
- © border-left-width
- © border-left-style
- © border-left-color
- © border-left
- © border-bottom-width
- © border-bottom-style
- © border-bottom-color
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
Процессор с ароматом жареной курочки: Intel якобы готовит чип Core i9-9900KFC - «Новости сети»
Проект устранения цифрового неравенства в РФ активно развивается - «Новости сети»
Гравитационная обсерватория LIGO получит апгрейд - «Новости сети»
Xiaomi соберёт деньги на производство спортивных смарт-часов с помощью краудфандинга - «Новости сети»
Раскрыты характеристики мощной тройной камеры Xiaomi Mi 9 - «Новости сети»
Wacom начала выпуск тонкого цифрового пера Pro Pen slim - «Новости сети»
Гид по выбору подарка к 23 февраля с партнёрами 3DNews - «Новости сети»
Складной iPhone показался в новом патенте Apple - «Новости сети»
Попытки установить связь с обсерваторией «Спектр-Р» продлятся ещё три месяца - «Новости сети»
Пользуясь проблемами Huawei, Samsung делает ставку на сетевое оборудование - «Новости сети»
Российские космонавты в мае выйдут в открытый космос - «Новости сети»
Место посадки зонда «Чанъэ-4» официально стало второй в истории лунной базой - «Новости сети»

Как Заработать 1000 Рублей за Сутки В Новом Проекте "24HOURS". Новинка / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

ЗАРАБОТОК В 24HOURS +10% КАЖДЫЙ ДЕНЬ. ВЫВОДИМ ПЕРВЫЕ ДЕНЬГИ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

САЙТ ДЛЯ ЗАРАБОТКА БЕЗ ВЛОЖЕНИЙ 1000 РУБЛЕЙ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Новинки React 16.8 — Суровый веб #194 - «Видео уроки - CSS»

Основы After Effects — #7 Parenting и Expressions - «Видео уроки - CSS»

Microsoft против Int. Explorer, Нейросеть от Skychain, Беспилотный трамвай - «Видео уроки - CSS»

ЗАРАБОТОК В ИНТЕРНЕТЕ В ИГРЕ СТРАЖИ ГАЛАКТИКИ. ВЫВОД ДЕНЕГ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Веб-приложение на asp.net mvc core — #7 Business Layer: создание уровня бизнес-логики - «Видео уроки - CSS»

Frontend-разработчик. 15 необходимых навыков - «Видео уроки - CSS»

Инстаграм здорового человека. Часть 1 - «Видео уроки - CSS»

Основы After Effects — #6 Применение эффектов - «Видео уроки - CSS»

ОТЛИЧНАЯ ИГРА С ВЫВОДОМ ДЕНЕГ. СТРАЖИ ГАЛАКТИКИ - САЙТ ДЛЯ ЗАРАБОТКА / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
! | |||
B | border-left-color | border-top | |
C | column-count | columns
|
counter-reset
|
D | E
|
H
|
Q
|
F
|
L
|
M
|
O |
P
|
W
|
T
|
text-shadow |
R | U
|
V | Z
|
Firefox | Opera | Safari и Chrome | |
-moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
@-правила | |||
@font-face | @media |
Селекторы и их комбинации | |||
A
|
A B
|
[attr]
|
[attr~='value']
|
Псевдоклассы | |||
:active
|
:enabled
|
:hover | :not
|
:only-child
|
:read-only | :target
|
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.