СВОЙСТВО BORDER-TOP-STYLE
Свойство border-top-style устанавливает стиль рамки элемента сверху.
Поддержка браузеров
Синтаксис
border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Рамка сверху будет отсутствовать. |
| hidden | Также как и в случае с none, рамка сверху будет отсутствовать. В случае, если задано свойство background-image, значение border-top-width всегда будет 0. В случае, когда border-style: hidden применяется к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse, рамка всегда будет отсутствовать. |
| dotted | Определяет точечную рамку сверху. |
| dashed | Определяет пунктирную рамку сверху. |
| solid | Определяет сплошную рамку сверху. |
| double | Определяет двойную рамку сверху. |
| groove | Определяет вдавленную резную рамку сверху. |
| ridge | Определяет выступающую рамку сверху. |
| inset | Определяет рамку сверху, которая создает эффект встроенности элемента. |
| outset | Определяет рамку свеху, которая создает эффект рельефа у элемента. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Унаследует значение свойства от родительского элемента. |
Песочница
<div class="block block-1"></div> <div class="block block-2"></div> <div class="block block-3"></div>HTML
.block {
height: 50px;
width: 50px;
display: inline-block;
background: #f1f1f1;
border: 3px solid gray
}
.block-1 {
border-top-style: inset
}
.block-2 {
border-top-style: double
}
.block-3 {
border-top-style: dashed
}
CSS