Window
Window Location
hash
host
hostname
href
origin
pathname
port
protocol
search
assign()
reload()
replace()
Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
language
onLine
platform
product
userAgent
javaEnabled()
taintEnabled()
Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width
Window Methods
closed
console
defaultStatus
document
frameElement
frames
history
innerHeight
innerWidth
length
localStorage
location
name
navigator
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
screen
screenLeft
screenTop
screenX
screenY
sessionStorage
self
status
top
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
confirm()
focus()
getComputedStyle()
matchMedia()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
setTimeout()
stop()
Свойство 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»
Примеры с различными границами рамок 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)
Вот как это выглядит на странице:
Синтаксис CSS border
Где:
- border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
-
border-style — стиль выводимой рамки. Может принимать следующие значения
- none или hidden — отменяет границу
- dotted — рамка из точек
- dashed — рамка из тире
- solid — простая линия (применяется чаще всего)
- double — двойная рамка
- groove — рифленая 3D граница
- ridge, inset, outset — различные 3D эффекты рамки
- inherit — применяется значение родительского элемента
- border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
Примечание
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».
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
Example
We will discuss the border-style property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values.
In this CSS border-style example, we have provided one value of solid which would apply to all 4 sides of the box.
Next, we’ll look at a CSS border-style example where we provide two values.
In this CSS border-style example, we have provided two values. The first value of dashed would apply to the top and bottom of the box. The second value of dotted would apply to the left and right sides of the box.
Next, we’ll look at a CSS border-style example where we provide three values.
In this CSS border-style example, we have provided three values. The first value of none would apply to the top of the box. The second value of solid would apply to the right and left sides of the box. The third value of double would apply to the bottom of the box.
Next, we’ll look at a CSS border-style example where we provide four values.
In this CSS border-style example, we have provided four values. The first value of inset would apply to the top of the element. The second value of outset would apply to the right side of the box. The third value of solid would apply to the bottom of the box. The fourth value of solid would apply to the left side of the box.
