Как сделать границы в css

CSS :: Границы элементов

Стиль границ элемента,
css-свойство border-style и его производные

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

Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример №1 ). Все они могут принимать ряд значений, которые определяют внешний вид границы:

  • none – граница не отображается, браузер обнуляет ее толщину (значение используется по умолчанию);
  • hidden – в принципе тоже самое, что и none , за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse , граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек;
  • dotted – линия границы будет иметь точечный вид;
  • dashed – линия границы будет иметь пунктирный вид;
  • solid – линия границы будет сплошной;
  • double – линия границы будет двойной;
  • groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности;
  • ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости;
  • inset – линия границы будет иметь объемный вид с эффектом вдавленности;
  • outset – линия границы будет иметь объемный вид с эффектом выпуклости.

Пример №1. Определение стиля границ элементов

Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример №2 ):

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

Пример №2. Использование сокращенного свойства border-style

Ширина границ элемента,
css-свойство border-width и его производные

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

  • ширина – принимаются любые единицы измерения, используемые в CSS ;
  • thin – устанавливает тонкую границу;
  • medium – устанавливает среднюю границу;
  • thick – устанавливает толстую границу.

Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения:

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

Пример №3. Установка ширины границ элементов

Цвет границ элемента,
css-свойство border-color и его производные

Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример №4 ). Все они принимают в качестве значений цвет либо специальное значение transparent , делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color , кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму:

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

Пример №4. Установка цвета границ элементов

Универсальные css-свойства border,
border-top, border-bottom, border-right и border-left

Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример №5 ). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.

Пример №5. Установка границ элементов

Скругление границ элемента,
css-свойство border-radius и его производные

Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слеш / задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рисунок №6 и пример №7 ). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

Рис. №6. Схема скругления углов рамки элемента

Пример №7. Установка радиусов границ элементов

Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения (см. пример №8 ):

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

Пример №8. Использование сокращенного свойства border-radius

Внешняя рамка элемента, css-свойства outline,
outline-style, outline-width и outline-color

Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример №9 ). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color , принимающего вместо специального значения transparent значение invert , которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.

Пример №9. Установка контура элементов

Расстояние между внешней и внутренней границами,
css-свойство outline-offset

Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример №9 ). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.

На практике, в процессе верстки страниц желательно использовать распространенный прием обнуления всех отступов, показанный в примере №10 . Дело в том, что разные браузеры могут по-разному задавать внутренние и внешние отступы элементов, что может приводить к нежелательным эффектам для веб-мастера. Поэтому лучше обнулить все отступы и задавать их самостоятельно в зависимости от конкретной ситуации.

Пример №10. Обнуление отступов элементов

Создание теней, css-свойство box-shadow

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид (см. пример №11 ), где:

  • смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
  • смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
  • размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром;
  • растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент;
  • цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр;
  • inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке;
  • none – тень добавляться не будет (используется по умолчанию).

Пример №11. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.

Границы элемента.

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

В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(!) элемента выводимого на экран.

Стиль границы.

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

Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.

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

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

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

  • Первое значение — Устанавливает единый стиль бордюра для всех сторон элемента.
  • Первое значение — Устанавливает стиль верхней и нижней границы элемента.
  • Второе значение — Устанавливает стиль левой и правой границы элемента.
  • Первое значение — Устанавливает стиль верхней границы элемента.
  • Второе значение — Устанавливает стиль левой и правой границы элемента.
  • Третье значение — Устанавливает стиль нижней границы элемента.
  • Первое значение — Устанавливает стиль верхней границы элемента.
  • Второе значение — Устанавливает стиль правой границы элемента.
  • Третье значение — Устанавливает стиль нижней границы элемента.
  • Четвёртое значение — Устанавливает стиль левой границы элемента.

Толщина границы.

Свойство border-width — устанавливает ширину границы элемента.

Ширина бордюра может быть заданна с помощью следующих аргументов:

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

А также в пикселях или любых других единицах измерения принятых в CSS.

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

  • Первое значение — Устанавливает единую толщину бордюра со всех сторон.
  • Первое значение — Устанавливает толщину верхней и нижней границы элемента.
  • Второе значение — Устанавливает толщину левой и правой границы элемента.
  • Первое значение — Устанавливает толщину верхней границы элемента.
  • Второе значение — Устанавливает толщину левой и правой границы элемента.
  • Третье значение — Устанавливает толщину нижней границы элемента.
  • Первое значение — Устанавливает толщину верхней границы элемента.
  • Второе значение — Устанавливает толщину правой границы элемента.
  • Третье значение — Устанавливает толщину нижней границы элемента.
  • Четвёртое значение — Устанавливает толщину левой границы элемента.

Цвет границы.

Цвет рамки или её сторон по отдельности определяется свойством border-color.

Цвет бордюра может иметь следующие значения:

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255,0,0) — значение цвета RGB.
  • transparent — прозрачная граница.

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

  • Первое значение — Устанавливает единый цвет бордюра со всех сторон.
  • Первое значение — Устанавливает цвет верхней и нижней границы элемента.
  • Второе значение — Устанавливает цвет левой и правой границы элемента.
  • Первое значение — Устанавливает цвет верхней границы элемента.
  • Второе значение — Устанавливает цвет левой и правой границы элемента.
  • Третье значение — Устанавливает цвет нижней границы элемента.
  • Первое значение — Устанавливает цвет верхней границы элемента.
  • Второе значение — Устанавливает цвет правой границы элемента.
  • Третье значение — Устанавливает цвет нижней границы элемента.
  • Четвёртое значение — Устанавливает цвет левой границы элемента.

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

Так вот перестраховываясь, привожу пример:

Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже:

  • 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-top-color — Устанавливает цвет верхней границы элемента.
  • border-top-style — Определяет стиль верхней границы элемента.
  • border-top-width — Определяет ширину верхней границы элемента.

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

Border

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

Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.

Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.

Границы таблицы.

Свойство CSS border-collapse определяет стиль отображения границ таблицы.

По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.

Внешний вид границ таблицы может принимать следующий вид:

  • separate — ячейки таблицы отделены друг от друга (по умолчанию).
  • collapse — ячейки таблицы не имеют промежутков между собой.
  • inherit — свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)

Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table .О свойстве display расскажу в отдельной главе.

Полезные советы:

Довольно часто слышу вопрос: — "Как сделать вертикальную линию, по аналогии с тегом <hr> — горизонтальная разделительная линия?".

Один из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства: border-left или border-right ) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.

CSS Границы

CSS свойства border позволяют указать стиль, ширину и цвет границы элемента.

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

У меня красная нижняя граница.

У меня округлые границы.

У меня синяя левая граница.

Стиль CSS Границы

Свойство border-style определяет, какую границу отображать.

Допускаются следующие значения:

  • dotted — Определяет точечную границу.
  • dashed — Определяет пунктирную границу.
  • solid — Определяет сплошную границу.
  • double — Определяет двойную границу.
  • groove — Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.
  • ridge — Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы.
  • inset — Определяет внутреннюю трехмерную границу. Эффект зависит от значения цвета границы.
  • outset — Определяет наружную трехмерную границу. Эффект зависит от значения цвета границы.
  • none — Не определяет границы.
  • hidden — Определяет скрытую границу.

Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

Демонстрация различных стилей границ:

Рифлёная граница. Эффект зависит от значения цвета границы.

Ребристая граница. Эффект зависит от значения цвета границы.

Вставная граница. Эффект зависит от значения цвета границы.

Выпуклая граница. Эффект зависит от значения цвета границы.

Примечание: Ни одно из ДРУГИХ свойств границы CSS (о которых вы узнаете больше в следующих главах) не будет иметь ЛЮБОГО эффекта, если не установлено свойство border-style !

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *