Учебник CSS 3. Статья «Границы элемента в CSS»
В этой статье учебника речь пойдет о работе с границами элементов, будут рассмотрены примеры в которых мы научимся управлять шириной границ, цветом и даже стилем границ. Кроме того, научимся стилизовать отдельные границы элементов и рассмотрим примеры в которых мы будем скруглять углы элементов.
Что представляет из себя граница элемента? Граница это обычная линия, которая располагается между внутренним (padding) и внешним (margin) отступом вокруг содержимого элемента.
Рис. 82 Границы элемента в CSS.
Использование границ элемента имеет очень широкое применение, например, при смысловом разделении частей страницы, добавлении к элементам списков границ снизу, создание рамки изображения, выделении информационного блока и тому подобное.
Для придания особого вида границ элемента в CSS используются следующие универсальные свойства:
CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.
Для запоминания порядка расстановки цветов, ширины и стиля границы в одном объявлении, можно использовать английское слово TRouBLe (где: T — top, R — right, B — bottom, L — left). По такому же принципу задаются отступы в ранее рассмотренных свойствах padding (внутренние отступы) и margin (внешние отступы).
Определить цвет границы вы можете в любой системе задания цвета (HEX, RGB, RGBA, HSL, HSLA, «предопределённые цвета»). Если вы пропустили тему «Цветовое оформление в CSS», то вы можете вернуться для её изучения.
Для простоты и понимания принципа указания цвета границ рассмотрим пример с использованием предопределённых цветов:
<!DOCTYPE html>
<html>
<head>
<title>Пример указания цвета границ элемента</title>
<style>
.primer1 {
border-color: red green blue yellow; /* задаём цвета для границ Top-Right-Bottom-Left */
}
.primer2 {
border-color: red green blue; /* задаём цвета для границ Top-Right&Left-Bottom */
}
.primer3 {
border-color: red green; /* задаём цвета для границ Top&Bottom-Right&Left */
}
.primer4 {
border-color: red; /* задаём цвет для всех границ красный Top&Right&Bottom&Left */
}
p {
width: 140px; /* задаём ширину элемента */
border-width: 10px; /* задаём ширину границы */
border-style: solid; /* задаём сплошную границу */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
<body>
<p class = "primer1">border-color:<br> red green blue yellow;</p>
<p class = "primer2">border-color:<br> red green blue;</p>
<p class = "primer3">border-color:<br> red green;</p>
<p class = "primer4">border-color: red;</p>
</body>
</html>
В данном примере мы создали четыре различных класса, которые определяют цвет границ элемента. Для первого абзаца мы использовали четыре цвета (различный цвет для каждой стороны),
Результат нашего примера:
Рис. 83 Пример указания цвета границ элемента.Как вы могли заметить, в данном примере мы также использовали универсальные свойства, которые отвечают за ширину (border-width) и стиль границы (border-style).
Свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений. За исключением процентных значений
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример установки ширины границ</title>
<style>
.primer1 {
border-width: thin medium thick 7px; /* задаём ширину для границ Top-Right-Bottom-Left */
}
.primer2 {
border-width: thin medium thick; /* задаём ширину для границ Top-Right+Left-Bottom */
}
.primer3 {
border-width: thin medium; /* задаём ширину для границ Top+Bottom-Right+Left */
}
.primer4 {
border-width: 0.1em; /* задаём ширину границ 0.1em для всех сторон Top+Right+Bottom+Left */
}
p {
width: 150px; /* задаём ширину элемента */
border-style: solid; /* задаём стиль границы - сплошная */
border-color: orange; /* задаём цвет границы */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
<body>
<p class = "primer1">border-width:<br> thin medium thick 7px;</p>
<p class = "primer2">border-width:<br> thin medium thick;</p>
<p class = "primer3">border-width:<br> thin medium;</p>
<p class = "primer4">border-width: 0.1em;</p>
</body>
</html>
В данном примере мы создали
Результат нашего примера:
Рис. 84 Пример установки ширины границ.Мы уже не раз с Вами сталкивались с применением стиля границы (border-style) элементов, но при этом все время использовали сплошную границу (значение solid), давайте рассмотрим все возможные значения, которые допускается использовать:
| Значение | Описание |
|---|---|
| none | Указывает на отсутствие границы. Это значение по умолчанию. |
| hidden | Указывает на отсутствие границы как и значение none, но имеет более высокий приоритет. Например, если в таблице для первой ячейки задано значение none, а для второй (соседней) задана видимая граница, то граница между ячейками отображается. Если для первой ячейки таблицы задано значение hidden, а для второй (соседней) задана видимая граница, то граница между ячейками не будут отображаться. |
| dotted | Точечная граница. |
| dashed | Пунктирная граница. |
| solid | Сплошная граница. |
| double | Двойная граница. |
| groove | Отображает границы с 3d эффектом (противоположно значению ridge). |
| ridge | Отображает границы с 3d эффектом (противоположно значению groove). |
| inset | Отображает границы с 3d эффектом (противоположно значению outset). При применении к ячейке таблицы с border-collapse : «collapse» — это значение ведет себя как groove. |
| outset | Отображает границы с 3d эффектом (противоположно значению inset). |
Давайте рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример указания стиля границ элемента</title>
<style>
.primer1 {
border-style: dotted solid dashed double; /* задаём стиль для границ Top-Right-Bottom-Left */
}
.primer2 {
border-style: dotted solid dashed; /* задаём стиль для границ Top-Right+Left-Bottom */
}
.primer3 {
border-style: dotted solid; /* задаём стиль для границ Top+Bottom-Right+Left */
}
.primer4 {
border-style: dotted; /* задаём точечную границу для всех сторон Top+Right+Bottom+Left */
}
p {
width: 170px; /* задаём ширину элемента */
border-width: 5px; /* задаём ширину границы */
border-color: green; /* задаём цвет границы */
text-align: center; /* задаём выравнивание текста по центру */
}
</style>
</head>
<body>
<p class = "primer1">border-style:<br> dotted solid dashed double;</p>
<p class = "primer2">border-style:<br> dotted solid dashed;</p>
<p class = "primer3">border-style:<br> dotted solid;</p>
<p class = "primer4">border-style: dotted;</p>
</body>
</html>
В данном примере мы создали четыре различных класса, которые определяют стиль границ элемента. Для первого абзаца
Результат нашего примера:
Рис. 85 Пример указания стиля границ элемента.Универсальное свойство border
В CSS существует множество вариантов стилизации границ, используя различные свойства, мы постараемся с вами в этой статье охватить все необходимые, а сейчас рассмотрим свойство, которое применяется чаще всего и позволит нам в одном объявлении указать значения ширины, цвета и стиля границы – свойство border:
Рис. 86 Универсальное свойство border.
CSS свойство border позволяет установить все свойства границ в одном объявлении. На вышеуказанном изображении мы задаем сплошную границу шириной 10 пикселей черного цвета. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию:
| Значение | Описание |
|---|---|
| border-width | Задает ширину границы. По умолчанию — «medium». |
| border-style | Задает стиль границы. По умолчанию — «none». |
basicweb.ru
CSS-рамка
Опубликовано: 14 октября 2014 Обновлено: 30 апреля 2019
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
| border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
| hidden | Эквивалентно none. |
| dotted | dotted |
| dashed | dashed |
| solid | solid |
| double | double |
| groove | groove |
| ridge | ridge |
| inset | inset |
| outset | outset |
| {1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-style: solid;}
p {border-top-style: solid;}2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
| border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) | |
|---|---|
| Значения: | |
| transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
| цвет | Цвет рамок задается при помощи значений свойства color.{border-color: #cacd58;} |
| {1,4} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-color: #cacd58;}3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
| border-width (border-top-width, border-right-width, border-bottom-width, border-left-width) | |
|---|---|
| Значения: | |
| thin / medium / thick | Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium |
| width (px, em) | {border-width: 5px;} |
| {1,4} | Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width: |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-width: 2px;}4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:
div {
width: 100px;
height: 100px;
border: 2px solid grey;
}При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.
Синтаксис
p {border-top: 2px solid grey;}html5book.ru
CSS: border — границы элементов в CSS.
Для управления границей элемента применяется универсальное свойство border. Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
| Значение по умолчанию | Зависит от элемента |
|---|---|
| Применяется | К любым элементам |
| Наследуется | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
background-color: #BDD8F9;
width: 400px;
height: 100px;
border: 3px solid red; /* задаём границу */
margin: 0 auto;
text-align: center
}
</style>
</head>
<body>
<div>Блок div с рамкой 3px красного цвета.</div>
</body>
</html>Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
<!DOCTYPE html>
<html>
<head>
<title>Границы в CSS</title>
<style>
div {
background-color: #BDD8F9;
width: 400px;
height: 100px;
margin: 0 auto;
text-align: center;
border-top: 3px dotted black;
border-right: 5px solid red;
border-bottom: 10px dashed green;
border-left: 12px solid yellow;
}
</style>
</head>
<body>
<div>Блок div с разными границами.</div>
</body>
</html>В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.
- border-style — стиль границы.
- border-width — ширина границы.
- border-color — цвет границы.
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
- none — граница отсутствует (по умолчанию).
- solid — сплошная граница.
- double — двойная граница.
- dashed — пунктирная граница.
- dotted — граница из ряда точек.
- ridge — граница «гребень».
- groove — граница «бороздка».
- inset — вдавленная граница.
- outset — выдавленная граница.
Примеры того, как они выглядят.
граница отсутствует (none)
сплошная граница (solid)
двойная граница (double)
граница из ряда точек (dotted)
пунктирная граница (dashed)
граница «бороздка» (groove)
граница «гребень» (ridge)
вдавленная граница (inset)
выдавленная граница (outset)
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Блок div с рамкой чёрного цвета и стиля ridge.
Рамка выглядит как solid, но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style, в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Одно значение (solid) — стиль границы установлен для всех сторон блока.
Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.
Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.
Свойство border-width. Толщина границы.
Для установки толщины границы элемента используется свойство border-width. Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style, для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Одно значение (2px) — толщина границы установлен для всех сторон блока.
Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.
Код примера:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 400px;
margin: 0 auto;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<div>Одно значение (2px) - толщина границы установлен для всех сторон блока.</div>
<br>
<div>Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.</div>
<br>
<div>Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.</div>
<br>
<div>Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.</div>
</body>
</html>Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
- thin — тонкая граница;
- medium — средняя толщина;
- thick — толстая граница;
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Свойство border-color. Цвет границы.
Для управления цветом границы используется средство border-color. Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:
- Шестнадцатеричная запись (#ff00aa) цвета.
- Формат RGB — rgb(255,12,110). Формат RGBA для CSS3.
- Форматы HSL и HSLA для CSS3.
- Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Одно значение (red).
Два значения (red black).
Три значения (red black yellow).
Четыре значения (red black yellow blue).
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 0px;
hight: 0px;
margin: 0 auto;
padding: 0px;
border-style: solid;
border-width: 200px;
border-color: yellow blue red black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
- border-top (верхняя граница)
- border-right (правая граница)
- border-bottom (нижняя граница)
- border-left (левая граница)
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы (border-top).
- border-top-color — задаёт цвет верхней границы элемента.
- border-top-width — задаёт толщину верхней границы элемента.
- border-top-style — задаёт стиль верхней границы элемента.
Параметры правой границы (border-right).
- border-right-color — задаёт цвет правой границы элемента.
- border-right-width — задаёт толщину правой границы элемента.
- border-right-style — задаёт стиль правой границы элемента.
Параметры нижней границы (border-bottom).
- border-bottom-color — задаёт цвет нижней границы элемента.
- border-bottom-width — задаёт толщину нижней границы элемента.
- border-bottom-style — задаёт стиль нижней границы элемента.
Параметры левой границы (border-left).
- border-left-color — задаёт цвет левой границы элемента.
- border-left-width — задаёт толщину левой границы элемента.
- border-left-style — задаёт стиль левой границы элемента.
Пример использования этих свойств:
<!DOCTYPE html>
<html>
<head>
<title>Толщина границы в CSS</title>
<style>
div {
width: 400px;
padding: 12px;
border-width: 3px;
border-style: solid;
border-top-color: red;
border-right-width: 10px;
border-bottom-style: double;
border-left-color: blue
}
</style>
</head>
<body>
<div>В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
<ul>
<li>переопределён цвет верхней границы при помощи свойства border-top-color в красный,</li>
<li>при помощи свойства border-right-width установлена толщина правой границы 10px,</li>
<li>при помощи свойства border-bottom-style стиль нижней границы переопределён как double,</li>
<li>при помощи свойства border-left-color левой границе установлен синий цвет.</li>
</ul>
</div>
</body>
</html>Свойство border-radius. Округление углов границы.
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Свойство border-radius: 15px.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Свойство border-radius: 15px.
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;Свойство border-radius: 15px.
Хотя этот код можно записать одним объявлением: border-radius: 15px 0 15px 0. Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех углов блока. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла. |
| 3 | Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. |
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius: 15px 0. Всего два значения.
Немного практики
Рисуем лимон средствами CSS.
Вот код такого блока:
margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;komotoz.ru
СSS Границы
Свойство границы
CSS свойство border позволяет определить стиль, ширину и цвет границы элемента.
Установлены границы со всех сторон.
Установлена красная нижняя граница
Установлены закругленные границы.
Установлена синяя левая граница.
Стиль границ
Свойство border-style указывает, какие границы отображать на дисплее.
Значения которые разрешены:
dotted— Определяет границу штрихомdashed— Определяет границу пунктиромsolid— Определяет границу сплошнойdouble— Определяет границу двойнойgroove— Определяет 3D границу желобом. Эффект зависит от значение border-colorridge— Определяет 3D границу коньком. Эффект зависит от значение border-colorinset— Определяет 3D границу вставкой. Эффект зависит от значение border-coloroutset— Определяет 3D границу начальной. Эффект зависит от значение border-colornone— Определяет без границhidden— Определяет скрытые границы
Свойство border-style может иметь от одного до четырех значений:
по часовой стрелке: top (сверху), right (справа), bottom (снизу), left (слева).
Пример
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Результат:
Штрихованные границы.
Пунктирные границы.
Сплошные границы.
Двойные границы.
Границы желобом. Эффект зависит от значение border-color.
Границы коньком. Эффект зависит от значение border-color.
Границы вставкой. Эффект зависит от значение border-color.
Границы начальные. Эффект зависит от значение border-color.
Границ нет.
Границы скрыть.
Смешанные границы.
Редактор кода »Примечание: Ни одно из свойств границ CSS описаны ниже не будут иметь никакого эффекта, если не установлено свойство border-style!
Ширина границ
Свойство border-width задает ширину четырех границ.
Ширина может быть установлена размером в ( px, pt, cm, em, т.п.) или с помощью одного из трех предопределенных значений: thin (тонкий), medium (средний), или thick (толстый).
Свойство border-width может иметь от одного до четырех значений:
по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева).
5px border-width
Пример
p.one {border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Цвет границ
Свойство border-color используется для установки цвета четырех границы.
Цвет может быть установлен:
- Название — укажите название цвета,
"red" - Hex — укажите шестнадцатеричное значение,
"#ff0000" - RGB — укажите значение RGB,
"rgb(255,0,0)" - прозрачность
Свойство border-color может иметь от одного до четырех значений по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева).
Если свойствоborder-color не установлено, оно наследует цвет элемента.
Границы красные
Пример
p.one {border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
Границы — Отдельных сторон
Из приведенных выше примеров Вы видели, что можно указать разные границы для каждой стороны.
В CSS, есть также свойства для задания каждой из границ по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева):
Границы разных стилей
Пример
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
В приведенном выше примере задается такой же результат, как этот:
Вот, как это работает:
Если, свойство border-style имеет четыре значения:
- border-style: dotted solid double dashed;
- Граница сверху будет штрихом
- Граница справа будет сплошной
- Граница снизу будет двойной
- Граница слева будет пунктирной
Если, свойство border-style имеет три значения:
- border-style: dotted solid double;
- Граница сверху будет штрихом
- Границы справа и слева будут сплошными
- Граница снизу будет двойной
Если, свойство border-style имеет два значения:
- border-style: dotted solid;
- Границы сверху и снизу будут штрихом
- Границы справа и слева будут сплошными
Если, свойство border-style имеет одно значение:
- border-style: dotted;
- все четыре границы будут штрихом
Свойство border-style используется в приведенном выше примере.
Тем не менее, оно также работает с border-width и border-color.
Граница — сокращенное свойство
Как Вы можете видеть из приведенных выше примеров, есть много свойств, которые нужно учитывать при работе с границами.
Чтобы сократить код, можно также задать индивидуальные свойства границы в одно свойство.
Свойство border является сокращенным свойством для следующих индивидуальных свойств границы:
border-widthborder-style(требуется)border-color
Вы также можете задать индивидуальные свойства границ, только для одной стороны:
Левая граница
p {
border-left: 6px solid red;
background-color: lightgrey;
}
Результат:
Редактор кода »Нижняя граница
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
Результат:
Редактор кода »Закругленные границы
Свойство border-radius используется для добавления закругленных границ элемента:
Границы нормальные
Границы закругленные
Границы круглее
Границы еще круглее
Примечание: Свойство border-radius не поддерживается в IE8 и более ранние версии.
Еще примеры
Все свойства границы в одном объявлении
В этом примере показано, сокращенное свойство для установки всех свойств для верхней границы в одном объявлении.
Установить стиль нижней границы
В этом примере показано, как задать стиль нижней границы.
Установить ширину левой границы
В этом примере показано, как задать ширину левой границы.
Установить цвет четырех границ
В этом примере показано, как задать цвет из четырех границ. Свойство может иметь от одного до четырех цветов.
Установить цвет правой границы
В этом примере показано, как настроить цвет правой границы.
Проверьте себя с помощью упражнений!
Все CSS свойства границ
| Свойства | Описание |
|---|---|
| border | Устанавливает все свойства границы в одном объявлении |
| border-bottom | Устанавливает нижнюю границу свойства в одном объявлении |
| border-bottom-color | Устанавливает цвет нижней границы |
| border-bottom-style | Устанавливает стиль нижней границы |
| border-bottom-width | Устанавливает ширину нижней границы |
| border-color | Устанавливает цвет четыре границы |
| border-left | Устанавливает левую границу свойства в одном объявлении |
| border-left-color | Устанавливает цвет левой границы |
| border-left-style | Устанавливает стиль левой границы |
| border-left-width | Устанавливает ширину левой границы |
| border-radius | Устанавливает все четыре свойства border-*-radius закругленными углами |
| border-right | Устанавливает все свойства правой границы в одном объявлении |
| border-right-color | Устанавливает цвет правой границы |
| border-right-style | Устанавливает стиль правой границы |
| border-right-width | Устанавливает ширину правой границы |
| border-style | Устанавливает стиль четырех границ |
| border-top | Устанавливает все верхние границы свойства в одной декларации |
| border-top-color | Устанавливает цвет верхней границы |
| border-top-style | Устанавливает стиль верхней границы |
| border-top-width | Устанавливает ширину верхней границы |
| border-width | Устанавливает ширину четырех границ |
schoolsw3.com
использование явного объявления и сокращений
От автора: на днях я столкнулся с необходимостью установить границы элемента CSS с трех сторон и подумал, что было бы интересно рассмотреть всевозможные способы сделать это. Ни один из них не является особенно сложным, но, возможно, вы считаете один из них наилучшим из-за четкости синтаксиса, эффективности или чего-то другого.
Предположим, нам нужна граница внизу, слева и справа (но не сверху) элемента.
Явное объявление для каждой стороны
.three-sides { border-bottom: 2px solid black; border-right: 2px solid black; border-left: 2px solid black; }
.three-sides { border-bottom: 2px solid black; border-right: 2px solid black; border-left: 2px solid black; } |
Хотя это довольно понятно, здесь все еще используется сокращение. Полностью свойства выглядели бы так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.three-sides { border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: black; border-left-style: solid; border-left-width: 2px; border-right-color: black; border-right-style: solid; border-right-width: 2px; }
.three-sides { border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 2px;
border-left-color: black; border-left-style: solid; border-left-width: 2px;
border-right-color: black; border-right-style: solid; border-right-width: 2px; } |
Заблокировать одну из сторон
Вы можете получить небольшое количество кода, объявив сокращением границу со всех четырех сторон, а затем удалив ту, которая не нужна:
.three-sides { border: 2px solid black; border-top: 0; }
.three-sides { border: 2px solid black; border-top: 0; } |
Только сокращенная ширина
.three-sides { border-color: black; border-style: solid; /* top, right, bottom, left — так же, как для margin и padding */ border-width: 0 2px 2px 2px; }
.three-sides { border-color: black; border-style: solid; /* top, right, bottom, left — так же, как для margin и padding */ border-width: 0 2px 2px 2px; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЗдесь все довольно интересно, так как вам не нужно объявлять цвет границы, чтобы получить границу, потому что цвет наследует currentColor! Так что это будет нормально работать:
.three-sides { /* цвет не объявлен */ border-style: solid; border-width: 0 2px 2px 2px; }
.three-sides { /* цвет не объявлен */ border-style: solid; border-width: 0 2px 2px 2px; } |
И вы получили бы красные границы, если бы сделали:
.three-sides { border-color: red; border-style: solid; border-width: 0 2px 2px 2px; }
.three-sides { border-color: red; border-style: solid; border-width: 0 2px 2px 2px; } |
Удивительно, но факт. Если вы хотите указать цвет явно, то можете использовать парочку сокращений, примерно так:
.three-sides { border: solid green; border-width: 2px 0 2px 2px; }
.three-sides { border: solid green; border-width: 2px 0 2px 2px; } |
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьwebformyself.com
Границы | WebReference
Определяет, как цвет фона или фоновая картинка должна выводиться под границами.
Позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.
Устанавливает цвет границы внизу элемента.
Устанавливает радиус скругления левого нижнего уголка рамки.
Устанавливает радиус скругления правого нижнего уголка границы.
Устанавливает стиль границы внизу элемента.
Устанавливает толщину границы внизу элемента.
Устанавливает цвет границы на разных сторонах элемента.
Используется для отображения рисованной рамки вокруг элемента.
Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.
Задаёт цвет границы слева от элемента.
Устанавливает стиль границы слева от элемента.
Устанавливает толщину границы слева от элемента.
Устанавливает радиус скругления уголков рамки.
Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.
Задаёт цвет границы справа от элемента.
Устанавливает стиль границы справа от элемента.
Устанавливает толщину границы справа от элемента.
Устанавливает стиль границы вокруг элемента.
Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.
Задает цвет границы сверху элемента.
Устанавливает радиус скругления левого верхнего уголка рамки.
Устанавливает радиус скругления правого верхнего уголка рамки.
Устанавливает стиль границы сверху элемента.
Устанавливает толщину границы сверху элемента.
Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента.
Задаёт цвет внешней границы элемента.
Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.
Задаёт стиль внешней границы элемента.
Задаёт толщину внешней границы элемента.
webref.ru
Учебник CSS 3. Статья «Работа с таблицами в CSS»
Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы HTML как таблицы, потому что они в большинстве случаев помогают систематизировать важную информацию и сделать её подачу более простой.
В этой статье я познакомлю Вас с тонкостями стилизации HTML таблиц, и вы узнаете новые свойства CSS, предназначенные для достижения этих целей.
Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:
| Тег | Описание |
|---|---|
| <table> | Определяет содержимое таблицы. |
| <caption> | Определяет наименование таблицы. |
| <th> | Определяет заголовочную ячейку таблицы. |
| <tr> | Определяет строку таблицы. |
| <td> | Определяет ячейку данных таблицы. |
| <thead> | Используется для содержания заголовка группы в таблице (шапка таблицы). |
| <tbody> | Используется для содержания «тела» таблицы. |
| <tfoot> | Используется для содержания «подвала» таблицы (футер). |
| <col> | Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>. |
| <colgroup> | Определяет группу столбцов в таблице. |
Работа с отступами в таблице
В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):
<!DOCTYPE html>
<html>
<head>
<title>Использование внутренних отступов в таблице</title>
<style>
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */
}
</style>
</head>
<body>
<table>
<caption>Отступы в таблице</caption>
<tr>
<th>1</th><th>2</th><th>3</th><th>4</th>
</tr>
<tr>
<td>2</td><td></td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td><td></td>
</tr>
<tr>
<td>4</td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа 🙂
Результат нашего примера:
Рис. 144 Пример использования внутренних отступов в таблице.Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS — border-spacing.
<!DOCTYPE html>
<html>
<head>
<title>Изменение промежутка между таблицами</title>
<style>
table {
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента */
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 30px 10px; /* промежуток между ячейками таблицы (первое значение - горизонтальный, второе вертикальный)*/
}
.second {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
.third {
border-spacing: 0.2em; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */
}
</style>
</head>
<body>
<table class = "first">
<caption>border-spacing: 30px 10px;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "second">
<caption>border-spacing: 0;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "third">
<caption>border-spacing:0.2em;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике — «Плавающие элементы в CSS».
- Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px, для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em.
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное. Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.
Результат нашего примера:
Рис. 145 Пример изменения промежутка между таблицами.Отображение границ вокруг ячеек таблицы
Вы можете сказать: — так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0, но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse. Как не странно, но использование свойства border-collapse со значением collapse является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse:
<!DOCTYPE html>
<html>
<head>
<title>Пример отображения границ вокруг ячеек таблицы</title>
<style>
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */
width: 50px; /* ширина ячеек */
height: 75px; /* высота ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
.second {
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
</style>
</head>
<body>
<table class = "first">
<caption>border-spacing: 0;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "second">
<caption>border-collapse: collapse;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: 0;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.
Результат нашего примера:
basicweb.ru