Сss свойство border-style
Содержание:
border-style
С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).
Ниже перечислены значения, которые можно задать свойству, и эффекты, которые при этом появляются.
- solid
- сплошная линия
- none
- по умолчанию – линии нет
- double
- двойная линия
- dashed
- пунктир
- dotted
- набор точек
- groove
- придание линии вогнутости
- ridge
- придание линии выпуклости
- inset
- эффект вдавленности блока
- outset
- эффект выпуклости блока
На примере ниже показаны все стили рамок, кроме , который продемонстрирован выше.
See the Pen
border style by Андрей (@adlibi)
on CodePen.
Property Values
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | 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 |
Property Values
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | 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 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-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-widthobject-fitopacityorderoutlineoutline-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-wrapz-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()
border-radius
С помощью свойства можно уходить от квадратных углов, вводя величину радиуса скругления.
На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:
See the Pen
border radius by Андрей (@adlibi)
on CodePen.
Для каждого угла можно задать свой радиус скругления.
Так, для квадрата на примере ниже, задано такое свойство:
Значения устанавливаются для углов по часовой стрелке.
See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.
Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.
Количество значений свойства | Результат |
---|---|
1 | Все стороны выполнены в одном стиле |
2 | Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение) |
3 | 1-е значение – верх лево; 2-е – верх право и низ лево; 3-е – низ право. |
4 | Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней. |
Интересно, что для каждого угла можно задать два параметра скругления через знак слэша. При этом первая величина – горизонтальный радиус, вторая – вертикальный. Показать это лучше на примере. Вот что получится, если для фигуры задать свойство:
See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.
Радиуса скругления можно задавать в процентах. Это удобно, например, если вы хотите нарисовать круг, то просто задайте для квадрата .
See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.
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
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Syntax
The CSS border-style property can be expressed with one, two, three or four values provided.
One Value
The syntax for the CSS border-style property (with 1 value) is:
When one single value is provided, the border-style value will apply to all four sides of the box (ie: top, right, bottom, left).
Two Values
The syntax for the CSS border-style property (with 2 values) is:
When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.
Three Values
The syntax for the CSS border-style property (with 3 values) is:
When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.
Four Values
The syntax for the CSS border-style property (with 4 values) is:
When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.
The top, right, bottom, and left border-style values can be one of the following:
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
Определение и использование
Свойство задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Примеры:
-
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» Попробовать |
Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top — для задания рамки сверху (верхняя граница)
- border-bottom — для задания рамки снизу (нижняя граница)
- border-right — для задания рамки справа (правая граница)
- border-left — для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color — задание цвета верхний границы
- border-top-style — задание стиля верхней границы
- border-top-width — задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
4.1. Пример. Красивая рамка для выделения цитат
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
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 Z-indexCSS 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 !importantCSS Math Functions
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);}
Свойство 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. |
Сергей Бензенкоавтор-переводчик статьи «CSS Border Properties»