Главная » Современный учебник CSS » Использование CSS » Свойство border: границы для блоков

Свойство border: границы для блоков

Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве CSS как border, с помощью которого можно задать границы для элемента. В этот раз мы более детально рассмотрим это свойство на примерах.

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */
border-width: 2px;

/* верхняя и нижняя границы имеют ширину 2px, левая и правая — 4px: */
border-width: 2px 4px;

/* верхняя граница — 2px, левая и правая — 6px, нижняя — 3px: */
border-width: 2px 6px 3px;

/* верхняя граница — 2px, правая — 3px, нижняя — 4px, левая — 5px: */
border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

thin — граница шириной 2px;
medium — граница шириной 4px;
thick — граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

solid — сплошная граница;
dotted — граница из точек;
dashed — пунктирная граница;
double — двойная граница;
groove — объемная граница-выемка;
ridge — объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
outset — выдавленная граница;
inset — вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color, для каждой границы блока можно задавать отдельный стиль — например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую — двойными. Здесь уже все зависит лишь от фантазии.

border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

border-top — стиль для верхней границы;
border-right — для правой границы;
border-bottom — для нижней границы;
border-left — для левой границы.

border-top: 2px solid #0000FF;
border-bottom: 7px double #000080;

Итоги

Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.

Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:

div {
     border-right: 8px double #FF0000;
     border-left: 8px double #FF0000;
     border-bottom: 8px double #FF0000;
     border-top: 4px dotted #FDD201;
}

Но это слишком длинная запись. Всё это можно записать короче:

div {
     border: 8px double #FF0000;
     border-top: 4px dotted #FDD201;
}

Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

Верхнюю и нижнюю границы сделайте сплошнымиsolid, задайте им одинаковый цвет на выбор и ширину 5 пикселей.
Левую границу сделайте пунктирнойdashed, шириной 3 пикселя, цвет выберите отличный от предыдущего.
Правую границу сделайте двойнойdouble, шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):