Css: border

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

В

ÃÂõ ÃÂÿþüøýðûþÃÂÃÂ, ÃÂÃÂþ üþöýþ ÃÂúð÷ðÃÂà÷ýðÃÂõýøàÃÂòþùÃÂÃÂò óÃÂðýøÃÂàÃÂþûÃÂúþ ôûàþôýþù ÃÂÃÂþÃÂþýàñûþúð. ÃÂûàÃÂÃÂøàÃÂõûõù õÃÂÃÂàÃÂòþùÃÂÃÂòð:

  • 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 — ÷ðôðÃÂàÃÂÃÂøûàûõòþù óÃÂðýøÃÂàÃÂûõüõýÃÂð.

ÃÂÃÂøüõàøÃÂÿþûÃÂ÷þòðýøàÃÂÃÂøàÃÂòþùÃÂÃÂò:

Сложные структуры 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;
 
}

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

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

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

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

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

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

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

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

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

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

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

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

Д

»Ã ÃÂÿÃÂðòûõýøàÃÂòõÃÂþü óÃÂðýøÃÂàøÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂÃÂõôÃÂÃÂòþ 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).

âõÿõÃÂàòõÃÂýÃÂüÃÂàú ÷ðôðÃÂõ, þ÷òÃÂÃÂõýýþù òÃÂÃÂõ, ø ýðÃÂøÃÂÃÂõü ÃÂøóÃÂÃÂÃÂ:

ÃÂþàúþô, úþÃÂþÃÂÃÂù ÃÂøÃÂÃÂõàÃÂðúÃÂàÃÂøóÃÂÃÂÃÂ, ÃÂþûÃÂúþ ÿþñþûÃÂÃÂõ ÃÂð÷üõÃÂþü:

CSS Border Style

The property specifies what kind of border to display.

The following values are allowed:

  • — Defines a dotted border
  • — Defines a dashed border
  • — Defines a solid border
  • — Defines a double border
  • — Defines a 3D grooved border. The effect depends on the border-color value
  • — Defines a 3D ridged border. The effect depends on the border-color value
  • — Defines a 3D inset border. The effect depends on the border-color value
  • — Defines a 3D outset border. The effect depends on the border-color value
  • — Defines no border
  • — Defines a hidden border

The 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:

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

Result:

A dotted border.

A dashed border.

A solid 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.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the
property is set!

Теги HTML

lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

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

Д

»Ã ÃÂÃÂÃÂðýþòúø ÃÂþûÃÂøýàóÃÂðýøÃÂàÃÂûõüõýÃÂð øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂòþùÃÂÃÂòþ border-width. âþûÃÂøýàóÃÂðýøÃÂàüþöýþ ÷ðôðÃÂàò ûÃÂñÃÂàðñÃÂþûÃÂÃÂýÃÂàõôøýøÃÂðàø÷üõÃÂõýøÃÂ, ýðÿÃÂøüõàò ÿøúÃÂõûðÃÂ.

ÃÂðú ø ôûàÃÂòþùÃÂÃÂòð border-style, ôûàÃÂòþùÃÂÃÂòð ÃÂðúöõ üþöýþ ÷ðôðòðÃÂàþàþôýþóþ ôþ ÃÂõÃÂÃÂÃÂÃÂà÷ýðÃÂõýøù. àðÃÂÃÂüþÃÂÃÂøü ÿÃÂøüõÃÂàôûàúðöôþóþ ÃÂûÃÂÃÂðÃÂ.

ÃÂôýþ ÷ýðÃÂõýøõ (2px) — ÃÂþûÃÂøýð óÃÂðýøÃÂàÃÂÃÂÃÂðýþòûõý ôûàòÃÂõàÃÂÃÂþÃÂþý ñûþúð.
ÃÂòð ÷ýðÃÂõýøà(1px 5px) — ÿõÃÂòþõ ÷ýðÃÂõýøõ ÃÂÃÂÃÂðýþòøûþ ÃÂþûÃÂøýàôûàòõÃÂÃÂýõù ø ýøöýõù ÃÂÃÂþÃÂþý, òÃÂþÃÂþõ ôûàñþúþòþù.
âÃÂø ÷ýðÃÂõýøà(1px 3px 5px) — ÿõÃÂòþõ ÷ýðÃÂõýøõ ôûàòõÃÂÃÂýõù ÃÂÃÂþÃÂþýÃÂ, òÃÂþÃÂþõ ôûàñþúþòÃÂÃÂ, ÃÂÃÂÃÂõÃÂÃÂõ ôûàýøöýõù.
çõÃÂÃÂÃÂõ ÷ýðÃÂõýøà(1px 3px 5px 7px) — úðöôþõ ÷ýðÃÂõýøõ ôûàþôýþù ÃÂÃÂþÃÂþýàÿþ ÃÂðÃÂþòþù ÃÂÃÂÃÂõûúõ ýðÃÂøýðààòõÃÂÃÂýõù.

ÃÂþô ÿÃÂøüõÃÂð:

âðúöõ ôûàÃÂòþùÃÂÃÂòð border-width ÃÂÃÂÃÂõÃÂÃÂòÃÂÃÂà÷ýðÃÂõýøàò òøôõ úûÃÂÃÂõòÃÂàÃÂûþò. ÃÂÃÂõóþ øàÃÂÃÂø:

  • thin — ÃÂþýúðàóÃÂðýøÃÂð;
  • medium — ÃÂÃÂõôýÃÂàÃÂþûÃÂøýð;
  • thick — ÃÂþûÃÂÃÂðàóÃÂðýøÃÂð;

âþûÃÂøýð óÃÂðýøÃÂÃÂ: thin.
âþûÃÂøýð óÃÂðýøÃÂÃÂ: medium.
âþûÃÂøýð óÃÂðýøÃÂÃÂ: thick.

Пример использования


Использование свойства border-image-outset 
div {
display : inline-block; /* устанавливаем элементы  как блочно-строчные (выстраиваем в линейку) */
background : yellow; /* устанавливаем цвет заднего фона */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
padding : 15px; /* устанавливаем внутренние отступы со всех сторон элемента */
margin-right : 50px; /* устанавливаем величину отступа от правого края элемента */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-outset : ;}  /* граница изображения не выходит за пределы блока границы (по умолчанию) */
.test2 {border-image-outset : 20px;}  /* граница изображения выходит за пределы блока границы со всех сторон на 20px  */
.test3 {border-image-outset : 30px 25px;}  /* граница изображения выходит за пределы блока границы сверху и снизу по 30px, слева и справа по 25 пикселей */


	
		

Первоначальное изображение:
src = «img-border.png» alt = «ramka»> class = «test»>outset 0

class = «test2»>outset 20px

class = «test3»>outset 30px 25px

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

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


Пример использования свойства border-image-outset.CSS свойства

×

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Генератор border CSS

border

nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset стиль nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
цвет
толщина
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;
}

Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

Вот как это выглядит на странице:

border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

Вот как это выглядит на странице:

При наведении курсора мыши на блок цвет рамки изменится

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P), где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
border-image-outset 15.0 15.0 15.0 6.0 11.0 12.0

CSS синтаксис:

border-image-outset:"length | number | initial | inherit";

/* значение применяется ко всем сторонам */
border-image-outset: 3;

/* первое значение применяется к горизонтали(top и bottom), а второе к вертикали (right и left) */
border-image-outset: 10px 15px;

/* первое значение - top, второе применяется к вертикали (right и left), а третее к bottom */
border-image-outset: 5px 10px 15px;

/* по порядку: top right bottom left */
border-image-outset: 5em 10px 2em 3em;

JavaScript синтаксис:

object.style.borderImageOutset = "10px"

Основы использования 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, мы можем сжать синтаксис:

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

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