Css нижняя граница блока

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Свойство border: краткая информация

Значение по умолчанию	Зависит от элемента
Применяется	К любым элементам
Наследуется	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#propdef-border

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.

• border-style — стиль границы.
• border-width — ширина границы.
• border-color — цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

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

1. none — граница отсутствует (по умолчанию).
2. solid — сплошная граница.
3. double — двойная граница.
4. dashed — пунктирная граница.
5. dotted — граница из ряда точек.
6. ridge — граница "гребень".
7. groove — граница "бороздка".
8. inset — вдавленная граница.
9. outset — выдавленная граница.

Примеры того, как они выглядят.

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Свойство border-width. Толщина границы.

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

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

• thin — тонкая граница;
• medium — средняя толщина;
• thick — толстая граница;

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS", а именно:

• Шестнадцатеричная запись ( #ff00aa ) цвета.
• Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
• Форматы HSL и HSLA для CSS3.
• Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка значений для сторон отдельно

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

• 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 — задаёт стиль левой границы элемента.

Пример использования этих свойств:

Свойство border-radius. Округление углов границы.

Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Значениями могут быть любые числа, используемые в CSS.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

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

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Табл. Свойство border-radius

Число значений	Результат
1	Радиус указывается для всех углов блока.
2	Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
3	Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

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

Что представляет из себя граница элемента? Граница это обычная линия, которая располагается между внутренним (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", то вы можете вернуться для её изучения.

Для простоты и понимания принципа указания цвета границ рассмотрим пример с использованием предопределённых цветов:

В данном примере мы создали четыре различных класса, которые определяют цвет границ элемента. Для первого абзаца мы использовали четыре цвета (различный цвет для каждой стороны), для второго – три цвета (один цвет слева и справа, у других сторон различный цвет), для третьего — два цвета (один цвет слева и справа, второй определяет цвет сверху и снизу элемента) и наконец, для четвертого абзаца указали одно значение цвета для всех границ элемента.

Результат нашего примера:

Рис. 83 Пример указания цвета границ элемента.

Как вы могли заметить, в данном примере мы также использовали универсальные свойства, которые отвечают за ширину (border-width) и стиль границы (border-style).

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

thin (тонкая линия).

medium (средняя линия) – это значение по умолчанию.

thick (толстая линия).

Давайте рассмотрим следующий пример:

В данном примере мы создали четыре различных класса, которые определяют ширину границ элемента. Для первого абзаца мы использовали четыре значения (различная ширина для каждой стороны), для второго – три значения (одна ширина слева и справа, у других сторон различная ширина), для третьего — два значения (одно значение — ширина слева и справа, второе значение определяет ширину границы сверху и снизу элемента) и наконец, для четвертого абзаца указали одно значение ширины для всех границ элемента.

Результат нашего примера:

Рис. 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 ).
При применении к ячейке таблицы с border-collapse : "collapse" — это значение ведет себя как ridge .

Давайте рассмотрим пример использования:

В данном примере мы создали четыре различных класса, которые определяют стиль границ элемента. Для первого абзаца мы использовали четыре значения (различный стиль для каждой стороны), для второго – три значения (один стиль слева и справа, у других сторон различный стиль), для третьего — два значения (одно значение — стиль слева и справа, второе для стиля сверху и снизу элемента) и наконец, для четвертого абзаца указали одно значение стиля для всех границ элемента.

Результат нашего примера:

Рис. 85 Пример указания стиля границ элемента.

Универсальное свойство border

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

Рис. 86 Универсальное свойство border.

CSS свойство border позволяет установить все свойства границ в одном объявлении. На вышеуказанном изображении мы задаем сплошную границу шириной 10 пикселей черного цвета. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию:

Значение	Описание
border-width	Задает ширину границы. По умолчанию — "medium" .
border-style	Задает стиль границы. По умолчанию — "none".
border-color	Задает цвет границы. По умолчанию — цвет элемента.

Давайте рассмотрим следующий пример:

В данном примере для первого блока мы указали сплошную границу шириной 4px оранжевого цвета, а для второго пунктирную границу шириной 0.2em красного цвета:

Результат нашего примера:

Рис. 87 Пример использования свойства border.

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

Использование свойств для одиночных границ

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

• border-top (устанавливает все свойства верхней границы в одном объявлении).
• border-right (устанавливает все свойства правой границы в одном объявлении).
• border-bottom (устанавливает все свойства нижней границы в одном объявлении).
• border-left (устанавливает все свойства левой границы в одном объявлении).

Эти свойства работают аналогично свойству border, разница заключается лишь в том, что используя свойство border-* вы стилизуете выбранную сторону, а не все стороны сразу. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию. Принцип работы свойства изображен ниже:

Рис. 88. Пример работы универсального свойства border-top.

В данном примере мы задаем сплошную границу шириной 10 пикселей черного цвета для верхней границы.

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

• border-top-width (устанавливает ширину верхней границы).
• border-top-style (устанавливает стиль верхней границы).
• border-top-color (устанавливает цвет верхней границы).

• border-right-width (устанавливает ширину правой границы).
• border-right-style (устанавливает стиль правой границы).
• border-right-color (устанавливает цвет правой границы).

• border-bottom-width (устанавливает ширину нижней границы).
• border-bottom-style (устанавливает стиль нижней границы).
• border-bottom-color (устанавливает цвет нижней границы).

• border-left-width (устанавливает ширину левой границы).
• border-left-style (устанавливает стиль левой границы).
• border-left-color (устанавливает цвет левой границы).

Давайте рассмотрим пример, чтобы закрепить полученные знания:

В данном примере для абзаца с классом primer1 мы указали универсальным свойством border-left сплошную границу с левой стороны шириной 4 пикселя фиолетового цвета, а для нижней границы указали, что она будет сплошная шириной 0.1em (по умолчанию черного цвета).

Для абзаца с классом primer2 универсальным свойством border мы указали для всех сторон элемента сплошную границу размером 1 пиксель зеленого цвета, при этом свойством border-bottom-style со значением none мы убрали границу снизу, а свойством border-left-w >3 пикселей .

Результат нашего примера:

Рис. 89 Пример использования свойств для одиночных границ.

Скругление углов элемента.

CSS 3 подарил нам такое универсальное свойство, как border-radius, оно позволяет нам определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:

• border-top-left-radius (определяет форму верхнего левого угла).
• border-top-right-radius (определяет форму верхнего правого угла).
• border-bottom-right-radius (определяет форму нижнего правого угла).
• border-bottom-left-radius (определяет форму нижнего левого угла).

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению (даже если у элемента отсутствуют границы).

Рис. 90 Принцип работы свойства border-radius.

1. Изображение под номером 1 — скругление углов отсутствует. Значение для элемента по умолчанию 0 (ноль).
2. Изображение под номером 2 — скругление углов (по типу дуги окружности). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em и так далее) и определяют radius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый).
3. Это свойство позволяет нам создавать не только скругленные, но и эллиптические углы. Скругление углов происходит по типу дуги эллипса – изображение 3. Значения указываются в единицах измерения CSS (px, em и так далее).
4. Порядок указания значений при скруглении по типу дуги эллипса следующий (изображение ниже): задаются значение /-я (от одного до четырёх) horisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) vertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Рис. 91 Порядок указания значений для свойства border-radius
(при скруглении углов по типу дуги эллипса).

В данном примере мы установили для всех блоков ширину и высоту равной 50 пикселям , указали внешние и внутренние отступы, и указали сплошную границу 3 пикселя оранжевого цвета.

Для демонстрации свойства border-radius создали 3 различных класса:

• .orange — скругление всех углов элемента по типу дуги окружности. Одно значениедля всех углов.
• .lemon — скругление всех углов элемента по типу дуги окружности. Указали 2 значения для углов, из которых: 1-ое значение — top-left и bottom-right, второе top-right и bottom-left.
• .lime — скругление всех углов элемента по типу дуги эллипса. Мы указали два значения для горизонтального радиуса (1-ое значение top-left и bottom-right, второе top-right и bottom-left), а третее значение через косую черту задает вертикальный радиус всех четырех углов.

Результат нашего примера:

Рис. 92. Пример округления углов элемента в CSS.

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

На примере border-bottom-left-radius (определяет форму нижнего левого угла):

Рис. 93 Принцип работы свойства border-bottom-left-radius.

1. Изображение под номером 1 — cкругление нижнего левого угла отсутствует. Значение элемента по умолчанию 0 (ноль).
2. Изображение под номером 2 — cкругление нижнего левого угла (по типу дуги окружности). Значение указывается в единицах измерения CSS (px, em и так далее) и определяет radius (радиус) скругления. Допускается указывать значения в процентах. Отрицательные значения недопустимы.
3. Изображение под номером 3 — cкругление нижнего левого угла (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em и так далее), первое значение определяет horisontal (горизонтальный) радиус скругления, а второе vertical (вертикальный). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Давайте рассмотрим пример, в котором укажем различные значения для свойства border-bottom-left-radius и посмотрим, что из этого выйдет:

Результат нашего примера:

Рис. 94 Пример скругления границы левого нижнего угла элемента в CSS.

Мы с Вами рассмотрели 25 базовых свойств, которые вам будут необходимы в повседневной работе с границами элементов. При дальнейшем изучении CSS мы с Вами неоднократно будем возвращаться к этим свойствам.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
  

• Используя полученные знания составьте следующее меню пагинации на странице:

Практическое задание № 22.

Продвинутое задание (составление меню пагинации с закругленными границами у стрелочек):

Практическое задание № 23.

Продвинутое задание (составление меню пагинации с закругленными границами у элементов с различными стилями при наведении):

Практическое задание № 24.

Подсказка: внимательно изучите пример перед выполнением, обратите внимание, что стрелочки при наведении имеют отличный от других элементов стиль.

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

-moz-border-bottom-colors

Устанавливает набор цветов для нижней границы элемента в Firefox.

-moz-border-left-colors

Устанавливает набор цветов для левой границы элемента в Firefox.

-moz-border-right-colors

Устанавливает набор цветов для правой границы элемента в Firefox.

-moz-border-top-colors

Устанавливает набор цветов для верхней границы элемента в Firefox.

border

Позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

border-bottom

Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

border-bottom-color

Устанавливает цвет границы внизу элемента.

border-bottom-style

Устанавливает стиль границы внизу элемента.

border-bottom-w >

Устанавливает толщину границы внизу элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента.

border-image

Используется для отображения рисованной рамки вокруг элемента.

border-left

Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.

border-left-color

Задает цвет границы слева от элемента.

border-left-style

Устанавливает стиль границы слева от элемента.

border-left-w >

Устанавливает толщину границы слева от элемента.

border-right

Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.

border-right-color

Задает цвет границы справа от элемента.

border-right-style

Устанавливает стиль границы справа от элемента.

border-right-w >

Устанавливает толщину границы справа от элемента.

border-style

Устанавливает стиль границы вокруг элемента.

border-top

Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.

border-top-color

Задает цвет границы сверху элемента.

border-top-style

Устанавливает стиль границы сверху элемента.

border-top-w >

Устанавливает толщину границы сверху элемента.

border-w >

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.

outline-color

Задает цвет внешней границы элемента.

outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.