Границы в css

Границы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Граница в CSS

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

Типы границ и их положение

Граница в CSS состоит из трёх свойств:

• border-color определяется с помощью единиц цвета;
• border-style может быть solid, dashed, dotted и др.;
• border-width определяется с помощью единиц размера.

Также граница может быть задана на четырёх возможных сторонах:

• border-top
• border-bottom
• border-left
• border-right

blockquote { border-color: yellow; border-style: solid; border-width: 1px; }

Сокращённое свойство border позволяет определить все три свойства сразу:

blockquote { border: 1px solid yellow; }

Единственная граница

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

blockquote { border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px; }

Что касается свойства border, у каждой стороны есть своя сокращённая версия:

blockquote { border-bottom: 1px solid yellow; }

Что делать, если мне надо три границы? Должен ли я установить их отдельно?

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

blockquote { border: 1px solid yellow; border-left: none; }

Сокращённые комбинации

Поскольку существуют три свойства границы и четыре положения границ, получается 12 возможных комбинаций:

borderborder-colorborder-styleborder-widthborder-topborder-bottomborder-leftborder-right

border-top-color	border-top-style	border-top-width
border-bottom-color	border-bottom-style	border-bottom-width
border-left-color	border-left-style	border-left-width
border-right-color	border-right-style	border-right-width

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

• border
• border-top
• border-bottom
• border-left
• border-right

Перейти к заданиям

Border в CSS — форматируем границы

«Border в CSS» – десятый урок учебника CSS. В этом уроке мы обсудим использование и форматирование границ в CSS.

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

Border в CSS.

Css позволяет создать границы практически для любого элемента на странице. Ниже представлены основные параметры CSS границ внутри удобно оформленной таблицы:

Параметр	Описание	Значения
border	позволяет описать правила отображения всех четырех границ одновременно	border–width
border–style
border–color
border–bottom	позволяет задать все свойства нижней границы в одном объявлении	border–bottom–width
border–style
border–color
border–bottom–color	задает цвет нижней границы	border–color
border–bottom–style	задает стиль нижней границы	border–style
border–bottom–width	толщина нижней границы	thin
medium
thick
length
border–color	позволяет задать цвет всех границ одновременно	color
border–left	позволяет задать все свойства левой границы	border–left–width
border–style
border–color
border–left–color	позволяет задать цвет левой границы	border–color
border–left–style	позволяет задать стиль левой границы	border–style
border–left–width	позволяет задать толщину левой границы	thin
medium
thick
length
border–right	позволяет задать все свойства правой границы	border–right–width
border–style
border–color
border–right–color	позволяет задать цвет правой границы	border–color
border–right–style	позволяет задать стиль правой границы	border–style
border–right–width	Задает толщину правой стороны границы	thin
medium
thick
length
border–style	позволяет задать стили для всех четырех границ одновременно	none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border–top	позволяет задать все свойства верхней границы	border–top–width
border–style
border–color
border–top–color	позволяет задать цвет верхней границы	border–color
border–top–style	позволяет задать стиль верхней границы	border–style
border–top–width	позволяет задать толщину верхней границы	thin
medium
thick
length
border–width	позволяет задать толщину всех четырех границ	thin
medium
thick
length

CSS предоставляет веб-мастеру достаточно широкий функционал в плане форматирования границ. В данном уроке мы рассмотрели все основные методы CSS форматирования границ (border в CSS).

В следующем уроке мы разберемся с использованием отступов в CSS.

---

Смотрите также

• 
  Word 2007 как не ставить номер на первой странице
• 
  Как установить пароль на word документ
• 
  Иконки в css
• 
  Как в word сделать фон страницы
• 
  Как в word 2007 по умолчанию сделать шрифт
• 
  Как создать шаблон документа в word 2010
• 
  Как в word сделать титульный лист
• 
  Как word убрать подложку в
• 
  Как в word поставить знак градуса
• 
  Комментарии в css коде
• 
  Как узнать сохранить документ word в pdf