Css border width
Содержание:
- CSS Tutorial
- CSS для отображения на экране
- Свойство Margin
- CSS Reference
- CSS Properties
- Свойство border-style
- Примеры
- CSS Properties
- CSS Properties
- Property Values
- Стиль границы
- Свойство Border
- What is CSS?
- Оформление рамок HTML-элементов с помощью CSS-свойств
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 Margins
Margins
Margin Collapse
CSS 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 Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important
CSS для отображения на экране
Одно замечание в отношении тегов pre в HTML — они сохраняют пустое пространство (пробелы и разрывы строк) для любого содержимого, которое в них включено. Поэтому идеально подходят для отображения фрагментов кода. Вот некоторые основные стили, которые обеспечивают, чтобы теги <pre> отлично смотрелись при отображении на веб-странице:
pre {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
overflow-y: hidden;
font-size: 12px;
line-height: 20px;
background: #efefef;
border: 1px solid #777;
background: url(lines.png) repeat 0 0;
}
pre code {
padding: 10px;
color: #333;
}
Приведенный выше CSS-код задает стили для всех тегов <pre> таким образом, что:
- Содержимое тегов pre занимает 100% ширины;
- Горизонтальная полоса прокрутки отображается, если ширина содержимого превышает ширину блока элемента <pre>;
- Вертикальная полоса прокрутки не отображается (блок <pre> будет автоматически установлен на всю высоту его содержимого);
- Цвет фона будет отображаться как светло-серый;
- В блоке <pre> появится тонкая рамка;
- Код будет включать повторяющиеся / чередующиеся полосы (смотрите примечание);
- Вокруг содержимого тегов <pre> будет отступ в 10 пикселей.
Примечание: Приведенный выше код использует свойство background для отображения повторяющегося изображения. Фоновое изображение должно быть несколько пикселей в ширину и 40 пикселей в высоту (равное двойной высоте строки). Верхние 20 пикселей должны быть более темного сплошного цвета, а нижние 20 пикселей — светлого прозрачного. Это создаст эффект полосатого фона, который улучшит читаемость содержимого тега <pre>. Можно удалить свойство background, если предпочитаете использовать сплошной однотонный фон.
Также обратите внимание, что мы задаем отступы и цвет через тег . Чтобы сделать это проще, можно добавить в селектор тега pre в HTML box-sizing: border-box;, а затем объединить все таким образом:
pre {
box-sizing: border-box;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
overflow-y: hidden;
font-size: 12px;
line-height: 20px;
background: #efefef;
border: 1px solid #777;
background: url(lines.png) repeat 0 0;
padding: 10px;
color: #333;
}
Это лишь основные стили, которые помогут выбрать правильное направление. Вы обязательно должны настроить CSS в соответствии с вашими предпочтениями и дизайном веб-страниц.
Свойство Margin
Обычно я использую свойство margin, чтобы добавить отступ между моим контентом и экраном на макете рабочего стола. Посмотрите на эту гифку:
Добавление отступов на сайт
Обратите внимание, что я добавил поля к левому и правому краям веб-сайта выше
Вот еще один пример использования свойства margin:
Добавление отступов на сайт
Как использовать свойство margin в CSS
Margin имеет всего четыре свойства поля:
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
Свойства margin
И помните, margin — это пространство, добавленное поверх нашего контента + отступы (по padding) + границы:
Серая область — margin
Давайте добавим отступ к нашему контенту. Весь наш набор смещается из-за margin, как в этом GIF:
Смещение
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Можем еще раз проверить расчеты:
Посмотрите, вокруг нашего контента + отступов + границы было добавлено поле 50 пикселей .
Давайте попробуем добавить поле только к одной стороне нашего контента (только левой стороне):
Свойство margin-left
Чтобы воссоздать результаты выше, напишите этот код в своем CSS
На консоли мы видим, что поле в 50 пикселей применено только к левой стороне
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Свойство border-style
Свойство border-style определяет тип отображения границы.
Это свойство принимает следующие значения:
- dotted – граница в точечку;
- dashed – штриховая граница;
- solid – сплошная граница;
- double – двойная граница;
- groove – трехмерная CSS рамка вокруг текста. Эффект зависит от значения border-color;
- ridge – трехмерная выпуклая рамка. Эффект зависит от значения border-color;
- inset – трехмерная утопленная рамка. Эффект зависит от значения border-color;
- outset – трехмерная внешняя граница. Эффект зависит от значения border-color;
- none – отключение границы;
- hidden – скрытая граница.
Свойство border-style может принимать от одного до четырех значений (для верхней, правой, нижней и левой границ).
Пример
Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.
Свойство border-width
Свойство border-width определяет ширину четырех границ. Можно указывать ее конкретный размер (в px, pt, cm, em, и т. д.) либо использовать одно из трех предустановленных значений: thin, medium или thick.
Свойство border-width может иметь от одного до четырех значений (для верхней, правой, нижней и левой рамки CSS).
Пример
Свойство border-color
Свойство border-color используется для указания цвета четырех границ.
Цвет можно установить с помощью:
- Названия: red, blue;
- Hex-значения: #ff0000;
- RGB-значения: rgb(255,0,0);
- Сделать прозрачным: значение transparent.
Свойство border-color может иметь от одного до четырех значений (для верхней, правой, нижней и левой границ).
Если значение border-color не установлено, то наследуется цвет элемента.
Пример
Border: отдельная стилизация границ
Из приведенных выше примеров видно, что можно устанавливать разную стилизацию для каждой стороны блока. В CSS-коде также имеются свойства для стилизации отдельных границ (top, right, bottom и left):
Пример
Приведенный выше пример даст тот же результат, что и:
Пример
Если у свойства border-style четыре значения:
• border-style: dotted solid double dashed; o верхняя граница будет точечной. o правая граница будет сплошной. o нижняя CSS двойная рамка. o левая граница будет в штрих.
Если у свойства border-style три значения:
• border-style: dotted solid double; o верхняя граница будет точечной. o правая и левая границы будут сплошными. o нижняя граница будет двойной.
Если у свойства border-style два значения:
• border-style: dotted solid; o верхняя и нижняя CSS рамки вокруг изображения будут точечными. o правая и левая границы будут сплошными.
Если у свойства border-style одно значение:
• border-style: dotted; o все четыре границы будут точечными.
В приведенном выше примере использовалось свойство border-style. Однако тот же принцип работы и у border-width, и у border-color.
Короткое свойство border
Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:
- border-width;
- border-style (обязательное свойство);
- border-color.
Пример
Также можно выставлять свойства какой-то конкретной границы с одной из сторон:
Левая граница
Пример
Нижняя граница
Пример
Закругленные границы
Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.
Пример
Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.
Все свойства границ в CSS
| Свойство | Описание |
| Border | Позволяет выставить все свойства границ одним объявлением. |
| border-bottom | Позволяет выставить все свойства нижней границы одним объявлением. |
| border-bottom-color | Установка цвета нижней границы. |
| border-bottom-style | Установка стилизации нижней границы. |
| border-bottom-width | Установка толщины нижней границы. |
| border-color | Установка цвета четырех границ |
| border-left | Позволяет выставить все свойства левой границы одним объявлением. |
| border-left-color | Установка цвета левой рамки вокруг картинки CSS. |
| border-left-style | Установка стиля левой границы. |
| border-left-width | Установка толщины левой границы. |
| border-right | Позволяет выставить все свойства правой границы одним объявлением. |
| border-right-color | Установка цвета правой границы. |
| border-right-style | Установка стиля правой границы. |
| border-right-width | Установка толщины правой границы. |
| border-style | Установка стиля четырех границ. |
| border-top | Позволяет выставить все свойства верхней границы одним объявлением. |
| border-top-color | Установка цвета верхней границы. |
| border-top-style | Установка стиля верхней границы. |
| border-top-width | Установка толщины верхней границы. |
| border-width | Установка толщины четырех рамок CSS. |
Примеры
Пример
Демонстрация того, как использовать содержание свойства знчений. В следующем примере контейнер (.a) исчезнет, и создадутся дочерние элементы (.b) дочерние элементы элемента на следующем уровне вверх в DOM:
.a { display: contents; border:
2px solid red; background-color: #ccc; padding: 10px; width: 200px;}.b { border: 2px solid blue;
background-color: lightblue; padding: 10px;}
Пример
Демонстрация того, как использовать наследование значения свойства :
body { display: inline;}p { display: inherit;}
Пример
Установить направление некоторых гибких элементов внутри элемента <div> в обратном порядке:
div { display: -webkit-flex; /* Safari */ -webkit-flex-direction: row-reverse; /* Safari 6.1+ */ display: flex; flex-direction: row-reverse;}
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Property Values
| Value | Description | Play it |
|---|---|---|
| none | Specifies no border. This is default | Play it » |
| hidden | The same as «none», except in border conflict resolution for table elements |
Play it » |
| dotted | Specifies a dotted border | Play it » |
| dashed | Specifies a dashed border | Play it » |
| solid | Specifies a solid border | Play it » |
| double | Specifies a double border | Play it » |
| groove | Specifies a 3D grooved border. The effect depends on the border-color value |
Play it » |
| ridge | Specifies a 3D ridged border. The effect depends on the border-color value |
Play it » |
| inset | Specifies a 3D inset border. The effect depends on the border-color value |
Play it » |
| outset | Specifies a 3D outset border. The effect depends on the border-color value |
Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
Стиль границы
Свойство указывает тип отображаемой границы.
Допустимы следующие значения:
- — Определяет пунктирную границу
- — Определяет пунктирную границу
- — Определяет сплошную границу
- — Определяет двойную границу
- — Определяет 3D канавку границы. Эффект зависит от значения цвета границы
- — Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы
- — Определяет 3D-вставку границы. Эффект зависит от значения цвета границы
- — Определяет трехмерную границу начала. Эффект зависит от значения цвета границы
- — Не определяет границы
- — Определяет скрытую границу
Свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Пример
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.
Примечание: Никакие другие свойства границы CSS, описанные ниже, не будут иметь никакого эффекта, если не задано свойство !
Свойство Border
Обычно вы будете использовать свойство border при создании кнопок. Вот демонстрация GIF
Кнопки, использующие свойство Border
Обратите внимание, как появляется белая рамка вокруг кнопки, когда наводится указатель мыши на кнопку
Как использовать свойство границы в CSS
И помните, граница — это пространство, добавленное поверх нашего контента + отступа:
Черная пунктирная линия — граница
Есть три важных параметра свойства границы:
-
border size
-
border style: solid (сплошная линия) / dotted («точечная» линия) / dashed (пунктир)
-
border color
Синтаксис свойства границы
Как я перечислил выше, существует три стиля свойства границы. В этом примере мы будем использовать пунктирный стиль:
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Откроем консоль и посмотрим расчеты блочной модели:
Теперь посмотрите на изображение выше — вокруг нашего контента + отступа добавлена граница 10 пикселей.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what background
images or background colors are to be used, different displays for different devices
and screen sizes, and much more!
Tip: The word cascading means that a style
applied to a parent element will also apply to all children elements within the
parent. So, if you set the color of the body text to «blue», all headings,
paragraphs, and other text elements within the body will also get the same color (unless you specify
something else)!
Оформление рамок HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
| border-style(border-top-style, border-right-style, border-bottom-style, border-left-style) | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
| hidden | Эквивалентно none. |
| dotted |
dotted |
| dashed |
dashed |
| solid |
solid |
| double |
double |
| groove |
groove |
| ridge |
ridge |
| inset |
inset |
| outset |
outset |
| {1,4} |
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:{border-style: solid dotted none dotted;}
|
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
| border-color(border-top-color, border-right-color, border-bottom-color, border-left-color) | |
|---|---|
| Значения: | |
| transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
| цвет | Цвет рамок задается при помощи значений свойства .
{border-color: #cacd58;} |
| {1,4} |
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
|
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
| border-width(border-top-width, border-right-width, border-bottom-width, border-left-width) | |
|---|---|
| Значения: | |
| thin / medium / thick | Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium |
| width (px, em) |
{border-width: 5px;} |
| {1,4} |
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width:{border-width: 5px 10px 15px 3px;}
|
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.
Синтаксис
CSS-фон
CSS content
