| Свойство | Описание | Примеры | |
|---|---|---|---|
| border-width |
Толщина границы Увеличивает размер |
border-width: 3px; |
|
| border-style |
Стиль границы Объёмные при:
border-width: 8px;
|
border-style: solid; |
Сплошная |
border-style: dotted; |
Точками | ||
border-style: dashed; |
Пунктир | ||
border-style: double; |
Двойная(width: 4px;) | ||
border-style: groove; |
Объёмная-groove | ||
border-style: ridge; |
Объёмная-ridge | ||
border-style: inset; |
Объёмная-inset | ||
border-style: outset; |
Объёмная-outset | ||
| border-color | Цвет границы | border-color: red; |
|
| border: 2px solid green; | Сокращенная форма записи (2px - width, solid - style, green - color) | ||
|
border: none; или border-color: transparent; |
Убрать границу | ||
| border-top | Верхняя граница | border-top-width: |
Толщина верхней границы |
border-top-style: |
Стиль верхней границы | ||
border-top-color: |
Цвет верхней границы | ||
| border-right | Правая граница | border-right-width: |
Толщина правой границы |
border-right-style: |
Стиль правой границы | ||
border-right-color: |
Цвет правой границы | ||
| border-bottom | Нижняя граница | border-bottom-width: |
Толщина нижней границы |
border-bottom-style: |
Стиль нижней границы | ||
border-bottom-color: |
Цвет нижней границы | ||
| border-left | Левая граница | border-left-width: |
Толщина левой границы |
border-left-style: |
Стиль левой границы | ||
border-left-color: |
Цвет левой границы | ||
| border-radius | |||
| border-radius |
Радиус скругления границ
display: block;
|
||
border-radius: 15px;Все углы на 15px |
|
||
border-radius: 50%;Все углы на 50% от ширины, получается круг |
|
||
border-radius: 40px 10px;40px - ЛВ и ПН, 10px - ПВ и ЛН |
|
||
border-radius:10px - ЛВ, 20px - ПВ, 30px - ПН, 40px - ЛН |
|
||
| border-top-left-radius | Радиус скругления верхней левой границы | border-top-left-radius: 30px; |
|
| border-top-right-radius | Радиус скругления верхней правой границы | border-top-right-radius: 30px; |
|
| border-bottom-left-radius | Радиус скругления нижней левой границы | border-bottom-left-radius: 30px; |
|
| border-bottom-right-radius | Радиус скругления нижней правой границы | border-bottom-right-radius: 30px; |
|
| border-radius: _px / _px | Горизонтальные и вертикальные радиусы |
border-radius: 30px / 15px;Горизонтальные радиусы: 30px, вертикальные 15px |
|
| border-radius: _px / _px | Горизонтальные и вертикальные радиусы |
border-radius: 10px 20px 30px 40px / 25px 35px 45px 55px; |
|
| border-image | |||
| border-image-source | Путь в изображению рамки | border-image-source: url(../css_border-image-2.png); |
|
| border-image-slice | Нарезка изображения рамки | border-image-slice: 30%; |
border-image-slice: 10 20 30 40 fill; |
| border-image-repeat | Повтор изображения рамки | border-image-repeat: |
border-image-repeat: repeat round; |
| border-image-width | Ширина изображения рамки | border-image-width: 50px; |
border-image-width: 50px 10px 20px 5px; |
| border-image-outset | Отодвигает рамку за пределы элемента | border-image-outset: 10px; |
border-image-outset: 10px 20px 30px 40px; |
| border-image: url(../css_border-image-2.png) 30% repeat; | Сокращенная запись | ||
| Свойство | Описание | Примеры | |
|---|---|---|---|
| outline | Внешняя рамка Выпадает из потока Не увеличивает размеры Нельзя задавать свойства для сторон |
outline: 20px solid red;
|
|
| outline-width | Толщина внешней рамки |
outline-width: 2px;
|
|
| outline-style | Стиль внешней рамки |
outline-style: solid;
|
|
| outline-color | Цвет внешней рамки |
outline-color: red;
|
|