Границы CSS
Границы CSS
В этой главе мы поговорим о границах и о том, как можно задать им стили. Мы можем задать ширину, стиль и цвет границы.
Пример свойства border:
Пример свойства border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Результат
Ширина границы
Свойство border-width устанавливает ширину границы.
Ширину можно указать в пикселях. Также её можно задать одним из трёх предопределённых значений: medium, thin или thick.
Нельзя использовать свойство "border-width" отдельно. Оно не будет работать. Сначала используйте "border-style" для задания стиля границы.
Пример свойства border-width:
Пример свойства border-width:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Цвет границы
Свойство border-color используется для установки цвета границы. Цвет можно задать следующим образом:
- name (имя) — указывает имя цвета, например "red"
- RGB — указывает значение RGB, например "rgb(255,0,0)"
- Hex — указывает шестнадцатеричное значение, например "#ff0000"
Нельзя использовать свойство "border-color" отдельно. Оно не будет работать. Сначала используйте "border-style" для задания стиля границы.
Обычно эти три свойства записывают вместе в одну строку.
Пример свойства border-color:
Пример свойства border-color:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Вы можете попробовать другие примеры с помощью нашего инструмента CSS Maker.
Стиль границы
Свойство CSS border-style задаёт стиль всех четырёх сторон границы элемента. Границы отображаются поверх фона элемента. Оно может принимать от одного до четырёх значений. Таким образом, каждая сторона может иметь своё значение. Значение по умолчанию для border-style — none.
Border-style имеет следующие значения:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Некоторые браузеры не поддерживают некоторые стили. Обычно, когда стиль не поддерживается, браузер отображает границу как сплошную.
CSS-границы для отдельных сторон
CSS предоставляет свойства, которые задают каждую границу (правую, левую, нижнюю и верхнюю).
Свойство border-style может принимать 4 значения, например, border-style: dotted solid double dashed; где верхняя граница пунктирная, нижняя — двойная, правая — сплошная, а левая — штриховая.
Свойство border-style может принимать 3 значения, например, border-style: dotted solid double; где верхняя граница пунктирная, нижняя — двойная, а правая и левая — сплошные.
Свойство border-style может принимать 2 значения, например, border-style: dotted solid; где правая и левая границы сплошные, а верхняя и нижняя — пунктирные. И, конечно же, это свойство может принимать только 1 значение, например, border-style: solid; где все стороны сплошные.
Пример свойств границ для отдельных сторон:
Пример границ для отдельных сторон:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>CSS border как сокращённое свойство
Свойство CSS border является сокращённым для следующих отдельных свойств границы:
- Свойство CSS border-width, которое задаёт ширину всех четырёх сторон границы элемента.
- Свойство CSS border-style, которое задаёт стиль всех четырёх сторон границы элемента.
- Свойство CSS border-color, которое задаёт цвет всех четырёх сторон границы элемента.
Пример сокращённого свойства border:
Пример сокращённого свойства border:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Скруглённые границы
Используя свойство CSS border-radius, вы можете добавить скруглённые границы к элементу.
Пример свойства border-radius:
Пример свойства border-radius:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>Разница между границами и контурами
Контур и граница часто вызывают путаницу, поскольку они очень похожи. Однако между ними есть различия:
- Контур рисуется за пределами содержимого элемента, поэтому он не занимает место.
- Контур обычно имеет прямоугольную форму, хотя это не обязательно.
Практика
Какие из следующих свойств можно использовать для стилизации границ в CSS?