border в CSS

Содержание

border

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

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

CSS Borders

Свойства границы CSS

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

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

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

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

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

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

Свойство border-style указывает тип отображаемой границы.

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

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

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

Пример

A dotted border.

A dashed border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

A hidden border.

Примечание: Никакие другие свойства границы CSS, описанные ниже, не будут иметь никакого эффекта, если не задано свойство border-style !

Ширина границы

Свойство border-width задает ширину четырех границ.

Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.

Свойство 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 используется для задания цвета четырех границ.

Цвет может быть установлен:

  • Name-укажите имя цвета, например «Red»
  • Hex-укажите шестнадцатеричное значение, например «#ff0000»
  • RGB-укажите RGB-значение, например «RGB (255, 0, 0)»
  • Прозрачный

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

Если 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 есть также свойства для указания каждой из границ (верхняя, правая, Нижняя и левая):

Пример

Приведенный выше пример дает тот же результат:

Пример

Итак, вот как это работает:

Если свойство border-style имеет четыре значения:

  • стиль границы: пунктирная Сплошная двойная пунктирная;
    • Верхняя граница пунктирная
    • Правая граница сплошная
    • Нижняя граница двойная
    • Левая граница пунктирная

Если свойство border-style имеет три значения:

  • Пограничный стиль: точечный сплошной двойной;
    • Верхняя граница пунктирная
    • правая и левая границы являются сплошными
    • Нижняя граница двойная

Если свойство border-style имеет два значения:

  • граница стиля: пунктирная твердая;
    • верхние и нижние границы пунктирные
    • правая и левая границы являются сплошными

Если свойство border-style имеет одно значение:

  • граница стиля: пунктирная;
    • все четыре границы пунктирные

Свойство border-style используется в приведенном выше примере. Однако, он также работает с border-width и border-color .

Граница-Сокращенное свойство

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

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

Свойство border является сокращенным свойством для следующих отдельных свойств границы:

  • border-width
  • border-style (required)
  • border-color

Пример

Можно также указать все свойства отдельных границ только для одной стороны:

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element’s border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • dotted — Defines a dotted border
  • dashed — Defines a dashed border
  • solid — Defines a sol >double — Defines a double border
  • groove — Defines a 3D grooved border. The effect depends on the border-color value
  • ridge — Defines a 3D r >inset — Defines a 3D inset border. The effect depends on the border-color value
  • outset — Defines a 3D outset border. The effect depends on the border-color value
  • none — Defines no border
  • hidden — Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

Demonstration of the different border styles:

A dotted border.

A dashed border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

Илон Маск рекомендует:  Автоматизация работы с бд

A hidden border.

Note: None of the OTHER CSS border properties described below will have ANY effect unless the border-style property is set!

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

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;
>

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

  • name — specify a color name, like «red»
  • Hex — specify a hex value, like «#ff0000»
  • RGB — specify a RGB value, like «rgb(255,0,0)»
  • transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Example

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 Border — Individual Sides

From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example

The example above gives the same result as this:

Example

So, here is how it works:

If the border-style property has four values:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

If the border-style property has three values:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

If the border-style property has two values:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

If the border-style property has one value:

  • border-style: dotted;
    • all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width and border-color .

CSS Border — Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Example

You can also specify all the individual border properties for just one side:

border-style

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit и hidden + + + +

Пример

Прописываем стиль для четырех границ:

Описание и использование

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

Примеры:

* border-style:dotted solid double dashed; — верхняя граница в-точку — правая граница обычная — нижняя граница двойная — левая граница в-тире

* border-style:dotted solid double; — верхняя граница в-точку — правая и левая границы обычные — нижняя граница двойная

* border-style:dotted solid; — верхняя и нижняя границы в-точку — правая и левая границы обычные

* border-style:dotted; — все четыре границы в-точку

Vavik 96

Интернет дайджест для вебмастеров и фотографов

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

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

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.

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

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Идем далее основ

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

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

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

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

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных – разделяя их через / мы укажем горизонтальный и вертикальный радиус.

Илон Маск рекомендует:  Наклон текста

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

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

Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.

Отлично получилось! Но это противоречит семантической верстке, создавать .arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:

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

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы – даже сердечки и знак биологической опасности.

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

Обзор возможностей свойства границ (border) в CSS

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

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

Основы

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

Эта запись придаст элементу рамку толщиной в 1px, сплошную, и залитую черным цветом (#000).

Также эту строку можно записать и в более расширенном варианте, когда мы укажем каждое значение свойства border отдельно:

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

Например, если мы возьмем значение border-width, то его можно «разложить» на несколько записей: border-top-width, border-left-width, border-bottom-width, border-right-width.

Или же, немного расширить его короткую запись (border-width: 1px;):

То есть мы получаем полный контроль над каждой стороной элемента!

P.S. Значение в стилях читаются по часовой стрелке: верх, право, низ, лево.

Закругление рамки-границы (border-radius)

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

Также, как и предыдущие свойства, свойство border-radius можно записать в сокращенном варианте, например:

а можно и более подробно:

или еще более подробно:

В качестве примера возможностей свойства, нарисуем лимон только при помощи CSS:

Свойство изображения (стиль) для рамки

Существует несколько общих правил для придания границе стиля. Это: dotted (пунктир), dashed (штриховка), solid (сплошная линия), double (двойная линия), groove (линия с выемкой), ridge (линия с коньком), inset (внутренний скос), и outset (внешний скос).

Но мы также можем вместо этих стилей рамки использовать, например, какую-то картинку.
Для этих целей служит свойство border-image-source .
В качестве значения свойства может выступать ссылка на нужную картинку:

Или же градиент:

В браузере получится нечто подобное:

После того как вы используете изображение в качестве свойств границы, применение его делается с помощью свойства border-image-slice (задается в числах или процентах, без указания единиц измерения, т.е. не нужно писать дополнительно px).
Например:

Также желательно указывать свойство border-image-width , т.е. ширину изображения для рамки (например, в пикселях, или в процентах от размера изображения).

Короткая запись всех рассмотренных выше свойств изображения в качестве рамки выглядит примерно так:

Несколько границ

Есть много методов для того, чтобы применить нескольких границ к элементу. Рассмотрим основные.

Наиболее популярный метод создания двух границ – воспользоваться свойством outline (контур, внешний скос).
Например,

Следующий способ – с помощью свойства Box-Shadow. Так можно создать бесконечное число границ, указывая их параметры через запятую (при наложении первая в списке будет выше, последняя – ниже).
Например,

3-й способ: с помощью Псевдо-элементов
Это, возможно, не самый элегантный подход, но он, безусловно, выполняет свою работу. Правда, с этим методом легко запутаться и перепутать порядок, в котором будут применяться цвета к границам.
Используйте псевдо-элементы :before и :after , а также сочетание предыдущих методов, чтобы придать элементу несколько рамок-границ.
Пример кода:

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

border | CSS

Генератор border CSS

Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.

стиль
цвет

Прозрачный border CSS

Чтобы сделать прозрачный border следует цвет написать в rgba: теория, конвертер.

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

Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline .

Внутренний border . Управление длиной блока

Если задано width: auto; , то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin , border и padding .

В остальных случаях border , как и padding , расширяет коробку элемента. То есть если неправильно рассчитать width , то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п.. Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box; . Тогда border и padding не будут влиять на ширину контейнера элемента.

border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;

Пунктирная обводка внутри HTML блока

Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:

Рамка в процентах

Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow , и outline . Для однотонных линий можно использовать background . Из-за того, что не хочется лишаться padding , нужен ещё и :after :

Вдавленная линия CSS

Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.

WEBTEORETIK

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

  • Главная
  • >>
  • Раздел >>Уроки CSS
  • >>
  • Материал >>
  • Создание рамок в CSS. Свойство border.

Создание рамок в CSS. Свойство border.

Категория: Уроки CSS Просмотров: 1203 Коментариев: Дата: 2020-02-11 Добавил: admin

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

И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.

Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:

  • 1. Толщина рамки: border-w >2px;
  • 2. Стиль рамки: border-style: sol >border-color: #ff0000;

Какие бывают стили рамок в CSS? Ниже приведены все доступные стили рамок:

  • dotted — Это точечная рамка.
  • dashed — Это пунктирная рамка
  • sol > double — Это двойная рамка
  • groove — Объемный вид
  • r > inset — Объемный вид
  • outset — Объемный вид

Теперь у нас есть все, чтобы создать рамку вокруг заголовка.

И сам стиль для рамки.

В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.

Рамка формируется из четырех сторон: Верхней, Правой, Нижней и Левой и, так как у нас указанно свойство border, то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.

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

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

Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.

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

На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки — border-w > border-style и цвет рамки — #ff0000.

То есть браузер, увидев такую, сокращенную запись border: 2px solid #ff0000;, так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

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

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

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

border-style

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

Если стиль рамки со всех сторон одинаковый, то можно использовать свойство border.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства border-style является одно или несколько (через пробел) ключевых слов задающих свой стиль рамки для каждой стороны.

толщина
Возможные значения и их описание

Значение Описание Пример
none Рамка убрана, если указана толщина рамки, то она становится равной нулю (0). none
hidden Скрывает рамку. То же, что и none за исключением случая с ячейками таблицы, к которым применено свойство border-collapse: collapse . Тогда общая для двух ячеек граница не будет отображена вне зависимости от того, какая рамка имеется у соседней ячейки. hidden
dotted Рамка, состоящая из точек.
dashed Пунктирная рамка из коротких отрезков.
solid Сплошная линия.
double Двойная сплошная линия.
groove Вид рамки вырезанной в поверхности.
ridge Противоположно groove. Вид выступающей над поверхностью рамки.
inset Рамка, как будто блок вдавили в поверхность.
outset Противоположно inset. Рамка, будто блок выдавили из поверхности.
inherit наследует значение border-style от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none.

Border-style может иметь от одного до четырех (через пробел) значений вида границ рамки, при этом будут соблюдаться эти правила:

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

Синтаксис

Пример CSS: использование border-style

Результат. Использование свойства CSS border-style.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden .

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

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

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

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

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

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

  • none — граница отсутствует (по умолчанию).
  • dotted — граница из ряда точек.
  • dashed — пунктирная граница.
  • solid — сплошная граница
  • double — двойная граница
  • groove — граница «бороздка»
  • ridge — граница «гребень»
  • inset — вдавленная граница
  • outset — выдавленная граница
Илон Маск рекомендует:  Что такое код strspn
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL