Css свойство border-style

Definition and Usage

The borderColor property sets or returns the color of an element’s border.

This property can take from one to four values:

  • One value, like: p {border-color: red} — all four borders will be red
  • Two values, like: p {border-color: red transparent} — top and bottom border will be red, left and right border will be transparent
  • Three values, like: p {border-color: red green blue}- top border will be red, left and right border will be green, bottom border will be blue
  • Four values, like: p {border-color: red green blue yellow} — top border will be red, right border will be green, bottom border will be blue, left border will be yellow

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-weightgridgrid-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-eventspositionquotesresizerightscroll-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 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 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!

❮ Previous
Next ❯

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

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

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

Примеры:

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

    все четыре границы пунктирные

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS1
JavaScript синтаксис: object.style.borderStyle=»dotted double»
Попробовать

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

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

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

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

CSS Свойства

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-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-eventspositionquotesresizerighttab-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

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Specifications

Specification Status Comment
Candidate Recommendation Initial definition
Initial value as each of the properties of the shorthand:
Applies to all elements, except internal table elements when is . It also applies to .
Inherited no
Percentages as each of the properties of the shorthand:
  • : refer to the size of the border image
  • : refer to the width or height of the border image area
Computed value as each of the properties of the shorthand:
  • : as specified, but with relative lengths converted into absolute lengths
  • : as specified
  • : one to four percentage(s) (as specified) or absolute length(s), plus the keyword if specified
  • : or the image with its URI made absolute
  • : as specified, but with relative lengths converted into absolute lengths
Animation type discrete

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-weightgridgrid-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-eventspositionquotesresizerightscroll-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-weightgridgrid-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-eventspositionquotesresizerightscroll-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

Definition and Usage

The property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

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

    all four borders are dotted

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderStyle=»dotted double»
Try it

Примеры с различными границами рамок 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)

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

More Examples

Example

Set a color for the border with a HEX value:

div {border-color: #92a8d1;}

Example

Set a color for the border with an RGB value:

div {border-color: rgb(201, 76, 76);}

Example

Set a color for the border with an RGBA value:

div {border-color: rgba(201, 76, 76, 0.3);}

Example

Set a color for the border with a HSL value:

div {border-color: hsl(89, 43%, 51%);}

Example

Set a color for the border with a HSLA value:

div {border-color: hsla(89, 43%, 51%, 0.3);}

Example

Set a different border-color for each side of an element:

div.ex1 {border-color: #0000ff;}div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}

Definition and Usage

The property sets the width of an element’s four borders. This property can
have from one to four values.

Examples:

  • border-width: thin medium thick 10px;
    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px
  • border-width: thin medium thick;
    • top border is thin
    • right and left borders are medium
    • bottom border is thick
  • border-width: thin medium;
    • top and bottom borders are thin
    • right and left borders are medium
  • border-width: thin;

    all four borders are thin

Note: Always declare the border-style property before the
property. An element must have borders before you can set the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatable
Try it
Version: CSS1
JavaScript syntax: object.style.borderWidth=»1px 5px»
Try it

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование изображения в качестве границы</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
padding : 50px; /* устанавливаем величину внутреннего отступа элемента */
border : 55px solid transparent; /* прозрачная сплошная граница размером 55px */
border-image : url(ramka.png) 100 round; /* указываем путь к изображению, устанавливаем смещение 100px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<div class = "test">Ваш текст</div>
	</body>
</html>

В этом примере мы используем изображение 800 на 687, которое мы установили в качестве изображения рамки. Кроме того, установили смещение 100px от верхней, правой, нижней и левой кромки изображения и указали, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.

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

Пример использования изображения в качестве границы.

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

<!DOCTYPE html>
<html>
<head>
<title>Изображение-граница на CSS</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 150px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
border : 10px solid transparent; /* прозрачная сплошная граница размером 10px для все элементов <div> */
margin-right : 20px; /* устанавливаем отступ справа 20px */
}
.test {
border-image : repeating-linear-gradient( 45deg, red, red 1%, yellow 1%, red 8%) 10; /* устанавливаем повторяющийся линейный градиент, который будет использован в качестве границы-изображения */
}
.test2 {
border-image : linear-gradient(to right, pink , green) 10;; /* устанавливаем линейный градиент, который будет использован в качестве границы-изображения  */
}
.test3 {
border-image : radial-gradient(yellow 50%, green 65%, red 100%) 10; /* устанавливаем круговой градиент, который будет использован в качестве границы-изображения  */
}
.test4 {
border-image : url(img-border.png) 25 stretch; /* указываем путь к изображению, устанавливаем смещение 25px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение будет растянуто на всю длину.  */
}
.test5 {
border-image : url(img-border.png) 15 round; /* указываем путь к изображению, устанавливаем смещение 15px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<p><b>Использование градиентов:</b></p>
		<div class = "test"></div>
		<div class = "test2"></div>
		<div class = "test3"></div>
		<p><b>Использование изображения:</b></p>
		<img src = "img-border.png" alt = "ramka">
		<div class = "test4"></div>
		<div class = "test5"></div>
	</body>
</html>

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

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

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

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
Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий