Html border

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


Блок div с рамкой 3px красного цвета.

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

Блок div с разными границами.

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

Подумайте, как при помощи 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 — выдавленная граница.

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

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница «бороздка» (groove)

граница «гребень» (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

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

Блок div с рамкой чёрного цвета и стиля ridge.

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

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

Одно значение (solid) — стиль границы установлен для всех сторон блока.

Обратите внимание

Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

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

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

Одно значение (2px) — толщина границы установлен для всех сторон блока.

Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Важно

Код примера:

Одно значение (2px) — толщина границы установлен для всех сторон блока.

Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

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

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

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

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

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

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

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

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

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

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

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

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

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

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

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

В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:

  • переопределён цвет верхней границы при помощи свойства border-top-color в красный,
  • при помощи свойства border-right-width установлена толщина правой границы 10px,
  • при помощи свойства border-bottom-style стиль нижней границы переопределён как double,
  • при помощи свойства border-left-color левой границе установлен синий цвет.

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

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

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

Свойство border-radius: 15px.

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

Свойство border-radius: 15px.

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

border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;

Свойство border-radius: 15px.

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

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

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

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

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;

Источник: http://komotoz.ru/uroki/css/border.php

CSS-свойство: border

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

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

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

Это свойство принимает разные значения:

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

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

Пример

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Посмотреть результат

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style!

Border Width

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

Ширину можно указывать как в единицах измерения (px, pt, cm, em и т. д.), так и с помощью ключевых слов: thin, medium или thick.

У свойства 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

Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.

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

  • Названием – вписывается название цвета (например, red);
  • Hex – указывается hex-значение цвета (например, #FF0000);
  • RGB – указывается RGB-значение цвета (например, rgb(255,0,0));
  • transparent (прозрачная).

У свойства 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 HTML для определения стиля каждой стороны элемента (top, right, bottom и left).

Пример

p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }

Посмотреть результат

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

Пример

p { border-style: dotted solid; }

Посмотреть результат

Как это работает

Если у свойства HTML border style будет четыре значения:

  • border-style: dotted solid double dashed;
  • верхняя граница имеет значение dotted;
  • правая граница имеет значение solid;
  • нижняя граница имеет значение double;
  • левая граница имеет значение dashed.

Если у border-style будет три значения:

  • border-style: dotted solid double;
  • верхняя граница имеет значение dotted;
  • правая и левая границы имеют значение solid;
  • нижняя граница имеет значение double.

Если у border-style будет два значения:

  • border-style: dotted solid;
  • верхняя и нижняя границы имеют значение dotted;
  • правая и левая границы имеют значение solid.
Читайте также:  Что следует учитывать при продвижении сайта

Если у HTML border style будет одно значение:

  • border-style: dotted;
  • то все четыре границы будут иметь значение dotted.

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

Сокращенное свойство border

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

  • border-width;
  • border-style (обязательно);
  • border-color.

Пример

p { border: 5px solid red; }

Посмотреть результат

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

Левая граница

p { border-left: 6px solid red; background-color: lightgrey; }

Посмотреть результат

Нижняя граница

p { border-bottom: 6px solid red; background-color: lightgrey; }

Посмотреть результат

Закругленные границы

Свойство HTML border radius позволяет оформить элемент границами с закругленными углами.

Пример

p { border: 2px solid red; border-radius: 5px; }

Посмотреть результат

Примечание: свойство border-radius не поддерживается в IE8 и более ранних версиях этого браузера.

Больше примеров

Как одним выражением стилизовать сразу все верхние границы
Стилизуем нижнюю границу элементов
Устанавливаем ширину левой границы
Указываем цвет четырех границ
Указываем цвет только правой границы элемента

Совет

Перевод статьи “CSS Borders” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/css-svoystvo-border-2.html

border

The border CSS property sets an element's border. It's a shorthand for border-width, border-style, and border-color.

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none.

The border shorthand is especially useful when you want all four borders to be the same.

To make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side.

Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element's content.
  • According to the spec, outlines don't have to be rectangular, although they usually are.

Syntax

/* style */
border: solid; /* width | style */
border: 2px dotted; /* style | color */
border: outset #f33; /* width | style | color */
border: medium dashed green; /* Global values */
border: inherit;
border: initial;
border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none.

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width.Sets the style of the border. Defaults to none if absent. See border-style.Sets the color of the border. Defaults to currentcolor if absent. See border-color.

Formal syntax

|| ||

where
= | thin | medium | thick
= none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
= | | | | | | currentcolor |<\p>

where
= rgb( {3} [ / ]? ) | rgb( {3} [ / ]? ) | rgb( #{3} , ? ) | rgb( #{3} , ? )
= rgba( {3} [ / ]? ) | rgba( {3} [ / ]? ) | rgba( #{3} , ? ) | rgba( #{3} , ? )
= hsl( [ / ]? ) | hsl( , , , ? )
= hsla( [ / ]? ) | hsla( , , , ? )

where
= |
= |<\p>

Example

HTML

I have a border, an outline, AND a box shadow! Amazing, isn't it?

CSS

div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem;
}

Result

Specifications

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 4 Opera Full support 3.5 Safari Full support 1 WebView Android ? Chrome Android ? Edge Mobile Full support Yes Firefox Android Full support 4 Opera Android ? Safari iOS Full support 1 Samsung Internet Android ?

Full support  Full supportCompatibility unknown  Compatibility unknown

Источник: https://developer.mozilla.org/en/CSS/border

Border



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

Свойство border-style определяет тип рамки вокруг элемента.

Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!

Значения border-style:

none: без рамки

dotted: рамка из точек

dashed: пунктирная рамка

solid: сплошная рамка

double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)

groove: трехмерная рамка

ridge: трехмерная рамка

inset: трехмерная рамка

outset: трехмерная рамка

Ширина рамки

Свойство border-width задает ширину рамки.

Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).

Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium;

}

Посмотреть

Цвет рамки (границы)

Свойство border-color используется для настройки цвета рамки элемента. Цвет можно указать с помощью:

  • названия — название цвета на английском, например, «red»
  • код RGB, например, «rgb(255,0,0)»
  • шестнадцатиричный код, например, «#ff0000»

Кроме того, можно задать цвет границы прозрачным («transparent»).

Заметка: свойство «border-color» не оказывает эффекта на рамку элемента, если не указано свойство «border-style».

Разные цвета границ

С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;

}

Посмотреть

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

  • border-style:dotted solid double dashed;
    • верхняя граница из точек
    • правая граница сплошная
    • нижняя граница двойная
    • левая граница пунктирная

  • border-style:dotted solid double;
    • верхняя граница из точек
    • левая и правая граница сплошные
    • нижняя граница двойная

  • border-style:dotted solid;
    • верхняя и нижняя границы из точек
    • правая и левая граница сплошные

  • border-style:dotted;

Указанные значения точно так же применяются к свойствам border-color и border-width.

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

Краткая запись свойств рамки

Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.

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

Краткая запись свойств границы называется «border»:

border:5px solid red;

Посмотреть

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

  • border-width
  • border-style
  • border-color

Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).

Все свойства границ — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).



Источник: http://weblabla.ru/css/border.html

Border CSS: создаем границы для элементов — учебник CSS

Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве 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 пикселей, цвет отличный от двух предыдущих.

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

Результат задания (вид в Chrome)

 

Далее в учебнике: border-radius — закругленные углы в CSS.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/border

border | CSS

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

стиль

div {
border: 3px none rgb(34, 34, 34); border-top: 3px none rgb(34, 34, 34); border-right: 3px none rgb(34, 34, 34); border-bottom: 3px none rgb(34, 34, 34); border-left: 3px none rgb(34, 34, 34); border-style: none; border-color: rgb(34, 34, 34); border-width: 3px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(34, 34, 34); border-right-color: rgb(34, 34, 34); border-bottom-color: rgb(34, 34, 34); border-left-color: rgb(34, 34, 34); border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;
}

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

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

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

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

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

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

width: auto; (по умолчанию)

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

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина коробки элементаДабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box;.

Тогда border и padding не будут влиять на ширину контейнера элемента.

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

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

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

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

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

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

Источник: http://shpargalkablog.ru/2013/12/border.html

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

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

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

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

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

border: 1px solid black;

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

border-width: thick;
border-style: solid;
border-color: black;

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

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

.box { border: 1px solid red;
} .box:hover { border: 1px solid green;
}

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

Обратите внимание

.box { border: 1px solid red;
} .box:hover { border-color: green;
}

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

Border-Radius

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

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

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

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

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

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

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

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

/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

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

.lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;
}

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

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

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

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

Border-Style

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

border: 20px groove #e3e3e3;

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

border-color: #e3e3e3;
border-width: 20px;
border-style: groove;

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

Outline

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

.box { border: 5px solid #292929; outline: 5px solid #e3e3e3;
}

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

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

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

.box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green;
} /* Create two boxes with the same width of the container */
.box:after, .box:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
} .box:after { border: 5px solid red; outline: 5px solid yellow;
} .box:before { border: 10px solid blue;
}

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

Box-Shadow

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

.box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange;
}

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

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

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

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

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

Для примера:

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

… это равносильно:

border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;

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

.box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }

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

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

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

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

.box { width: 200px; height: 200px; background: black;
}

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

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

.arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow;
}

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

.arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow;
}

Важно

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

.arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue;
}

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

Создаем Speech Bubble

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

Hi there!

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

.speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center;
}

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

.speech-bubble:after { content: '';
}

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

.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow;
}

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

.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red;
}

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

.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%;
}

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

.speech-bubble { /* … other styles */ border-radius: 10px;
} .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */
}

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

/* Speech Bubbles Usage: примените класс .speech-bubble и .speech-bubble-НАПРАВЛЕНИЕ, как показано ниже Hi there
*/ .

speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif;
} .

Совет

speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid;
} /* Position the Arrow */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px;
}
.

speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px;
} .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px;
} .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px;
}

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

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

Text goes here.

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

.speech-bubble { /* other styles */ display: table;
} .speech-bubble p { display: table-cell; vertical-align: middle;
}

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

.biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow;
}

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм.

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

На этом все, творческих вам успехов!

Дальше: Как писать продающие тексты? до 70% продаж от числа посетителей

Источник: http://sitear.ru/material/css-border-radius-color-style-css-svoystva-border

CSS Учебник — Границы

« Предыдущая глава Следующая глава »

С помощью CSS Вы сможете оформлять границы HTML элементов.

Твитнуть

CSS свойство border-style позволяет установить стиль для границ HTML элемента.

Значения для установки стилей границ:

  • solid границы будут нарисованы сплошной линией;
  • dashed границы будут нарисованы пунктирной линией;
  • dotted границы будут нарисованы точками;
  • double границы будут нарисованы двойной сплошной линией.

Пример

.bor1
{
border-style:solid;
}
.bor2
{
border-style:dashed;
}
.bor3 {
border-style:dotted;
}

Быстрый просмотр

Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).

Цвет границы

С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.

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

  1. С помощью имени (например 'red' задаст красный цвет);
  2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
  3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пример

.bor1
{
border-style:solid;
border-color:red;
}
.bor2
{
border-style:solid;
border-color:green;
}
.bor3 {
border-style:solid;
border-color:blue;
}

Быстрый просмотр

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

С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.

Толщина может быть указана либо в пикселях, либо с помощью предопределенных значений: thin, medium, thick (тонкая, средняя, толстая).

Пример

.bor1 {
border-style:solid;
border-width:4px;
}
.bor2
{
border-style:solid;
border-width:2px;
}
.bor3 {
border-style:solid;
border-width:thin;
}

Быстрый просмотр

Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:

Пример

.bor1 {
border-top-style:solid;
border-width:2px;
}
.bor2
{
border-bottom-style:solid;
border-width:2px;
}
.bor3 {
border-left-style:solid;
border-right-style:solid;
border-width:2px;
}

Быстрый просмотр

Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.

Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.

Стенографическое задание свойств

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

Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета, толщиной 2 пикселя */
.bor1 {
border:2px solid green;
}

Быстрый просмотр

Порядок следования свойств в стенографической форме записи:

  1. border-width
  2. border-style
  3. border-color

Обратите внимание: Вы можете пропускать неиспользуемые свойства.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной 1 пиксель */
.bor1 {
border:1px solid;
}

Быстрый просмотр

Внешняя граница

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

Пример

.out1
{
outline-style:dashed; /* определяет стиль внешней границы */
outline-color:green; /* определяет цвет внешней границы */
outline-width:4px; /* определяет ширину внешней границы */
border-style:solid; }

Быстрый просмотр

Сделайте сами

Задание 1 исправьте ошибки оформления (после исправления всех ошибок элементы должны стать оформленными согласно их описанию).

Пример

Моя граница нарисована пунктирной линией.<\p>

Моя граница нарисована сплошной линией красного цвета.

Моя граница сверху и снизу нарисована сплошной линией, а слева и справа пунктирной. Границы со всех сторон нарисованы голубым цветом.

Моя граница нарисована сплошной линией, толщиной 1 пиксель.

Моя граница слева и справа нарисована сплошной линией розового цвета.

Задание 2 оформите элементы согласно их описанию.

Пример

1. Я имею сплошную границу коричневого цвета.
2. Я имею сплошную границу красного цвета слева и справа.
3. Я имею сплошную границу розового цвета сверху, и пунктирную границу голубого цвета слева, справа и снизу.
4. Я имею границу оранжевого цвета толщиной 1 пиксель.
5. Я имею границу красного цвета толщиной 2 пикселя сверху и снизу и пунктирную границу серого цвета слева и справа.
6. Я имею сплошную границу #1435AD цвета и толщиной 1 пиксель. 7. Я имею пунктирную границу #FF8100 цвета и толщиной 1 пиксель сверху и сплошную границу цвета #0B6124 и толщиной 2 пикселя снизу.

« Предыдущая глава Следующая глава »

Источник: http://www.wisdomweb.ru/CSS/border.php

CSS border

As explained in the text about the CSS box model, an HTML element can have a border around it. Borders can be solid, dashed, three-dimensional, have rounded corners, and you can even use images in your borders.

Borders are specified using the various CSS border properties. This text covers these border properties.

CSS Border Properties

Borders are styled using these border CSS properties:

  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-right
  • border-bottom
  • border-left
  • 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
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

These CSS properties for border styling will be explained in the following sections.

border

The border CSS property sets the border around an HTML element, meaning all four borders (top, right, bottom and left). The border CSS property value consists of three parts:

  • border width
  • border style
  • border color

Each of these parts are specified when setting the border property, separated by a space. Here is an example:

#theDiv { border : 1px solid #000000;
}

The first value is 1px which is the border width. This value sets the border around the HTML element to a width of 1 pixel. Border widths are specified using any of the valid CSS units.

Обратите внимание

The second value is solid which is the border style. This value sets the border to be solid, meaning a simple line (not dashed, no 3D effect etc.). There are many more styles you can choose from. These will be covered later.

The third value is #000000 which is the border color. This value sets the border color to black. Border colors are specified using the CSS colors formats.

border-width

The border-width CSS property can be used to set the width of the border around an HTML element. Values for the border-width CSS property are specified using any of the valid CSS units. Here is an example:

#theDiv { border-width: 2px;
}

This example CSS rule sets the border width to 2 pixels for the HTML element selected by the CSS rule.

border-style

The border-style CSS property can be used to set the border style of a border around an HTML element. The valid values you can use for the border-style CSS property are:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

The none and hidden values have the same effect. It shows no border.

Here are some visual examples of how these border styles look when rendered:

solid
dotted
dashed
double
groove
ridge
inset
outset

Note that the border width is set to 2px for the first three examples, and 6px for the last. Some of the border styles require a border width bigger than 2px before you can really see their effect.

border-color

The border-color CSS property sets the color of the border. The border-color CSS property can accept any valid CSS color. Here is a border-color example:

#theParagraph { border-width: 2px; border-style: solid; border-color: #ff00ff;
}

This is how that example will look when rendered:

border-color example.

border-top, border-right, border-bottom, border-left

The border-top, border-right, border-bottom and border-left properties work the same way as the border property, except these CSS properties only configure one part of the border (the top, left, bottom or right border). These properties are configured in the same way. Here is an example:

#theDiv { border-left: 1px solid #000000;
}

This example sets the left border of the selected HTML element to a 1 pixel wide, solid, black border. Here is how that looks when rendered in the browser:

An element with border-left: 1px solid #000000

Additional Border CSS Properties

The last CSS properties for border (border-top-width, border-top-style, border-top-color etc.) work the same way as the border-width, border-style and border-color properties, except these last border properties only set on part of the border (top, right, bottom or left).

Here is an example:

#theDiv { border-top-width: 2px; border-top-style: dashed; border-top-color: #cccccc;
}

This example sets the top border of the selected element to a 4 pixel wide, dashed, gray border. Here is how that looks when rendered in the browser:

An element with border-top-width: 2px; border-top-style: dashed; border-top-color: #cccccc;

border-radius

The border-radius CSS property is new in CSS 3.0 . The border-radius CSS property is used to create rounded corners of borders on HTML elements. Before border-radius rounded corners on HTML elements was only possible using tables and images, and it was both heavy in HTML and heavy to download for the browser. Luckily the border-radius CSS property saves us from that misery.

Here is a border-radius example:

#theDiv { border : 1px solid #cccccc; border-radius : 10px; padding : 10px;
}

Here is how the div element looks with these CSS styles applied:

This div element has rounded corners.

As you can see, the div element now has rounded corners. The radius of the rounding is 10 pixels because I set 10px as radius (value) in the border-radius CSS property declaration.

The border-radius CSS property also works with background colors, even if the HTML element has no border. Here is a border-radius and background-color example:

Источник: http://tutorials.jenkov.com/css/border.html

Ссылка на основную публикацию