Свойство CSS border-top
Свойство CSS border-top устанавливает ширину, цвет и стиль линии верхней границы элементов. Это сокращённое свойство для задания значений border-top-width, border-top-style и border-top-color.
Эти три значения сокращённого свойства можно указывать в любом порядке, при этом одно или два из них могут отсутствовать.
Если цвет не указан, значение будет взято из свойства color. Если свойство color не определено, по умолчанию используется чёрный цвет.
Если width не указан, будет использован размер medium.
| Начальное значение | medium none currentColor |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Да. Цвет и ширина границы анимируются. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.borderTop = "1px solid black"; |
Синтаксис
Синтаксис свойства CSS border-top
border-top: border-width border-style border-color | initial | inherit;Пример использования свойства border-top:
Пример свойства CSS border-top со значением solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-top: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-top example</h2>
<div> This is a simple example for the border-top property.</div>
</body>
</html>Результат
Пример использования свойства border-top для разных элементов:
Пример свойства CSS border-top со значениями dotted, solid и double
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-top: 5px solid #8ebf42;
}
p {
border-top: 4px dotted #1c87c9;
}
div {
border-top: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green top border</h1>
<p>A heading with a dotted blue top border.</p>
<div>A div element with a thick double top border.</div>
</body>
</html>Вы можете создать блок с помощью элемента <div>, задать для него background-color и определить верхнюю границу.
Пример использования свойства border-top для создания блока с ridge-границей:
Пример свойства CSS border-top со значением ridge
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-top: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the top.</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| border-top-width | Устанавливает ширину верхней границы элемента. Значение по умолчанию — "medium". Обязательное значение. |
| border-top-style | Устанавливает стиль линии верхней границы элемента. Значение по умолчанию — "none". Обязательное значение. |
| border-top-color | Устанавливает цвет верхней границы элемента. Значение по умолчанию — текущий цвет текста. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какой синтаксис правильный для установки CSS-свойства 'border-top'?