Тень вокруг элемента
div {
box-shadow: inset 4px 4px 3px 5px #999999 2px 2px 5px black;
}
Задает в сокращенном виде свойства границ элемента: ширину, стиль, цвет линии
border: 1px solid red;
Задает в скоращенном виде свойства нижней границы элемента: ширина, стиль, цвет
div {
border-bottom: 1px solid red;
}
Задает цвет нижней границы элемента
div {
border-bottom-color: #000;
}
Задает стиль нижней границы элемента, значения из border-style
div {
border-bottom-style: none;
}
Задает ширину нижней границы, значения из border-width
div {
border-bottom-width: 3em;
}
Задает цвет границ
div {
border-color: #000;
}
Задает в скоращенном виде свойства левой границы элемента: ширина, стиль, цвет
div {
border-left: 1px solid red;
}
Задает цвет левой границы элемента
div {
border-left-color: #000;
}
Задает стиль левой границы элемента, значения из border-style
div {
border-left-style: none;
}
Задает ширину левой границы, значения из border-width
div {
border-left-width: 3em;
}
Скругляет углы границ элемента
border-radius:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius:
top-left-up
top-right-up
bottom-right-down
bottom left-down
/
top-left-left
top-right-right
bottom-right-right
bottom-left-left
/* задаем радиусы 4х углов*/
border-radius: 15px 10px 25px 5px;
/* задаем радиус сразу для 4х углов */
border-radius: 30%;
/* левый верх (правый низ) и правый верх (левый низ) */
border-radius: 4em 8em;
/* радиус для 4х углов */
/* 4em - по горизонтали, 8em - по вертикали */
border-radius: 4em/8em;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
Задает в скоращенном виде свойства правой границы элемента: ширина, стиль, цвет
div {
border-right: 1px solid red;
}
Задает цвет правой границы элемента
div {
border-right-color: #000;
}
Задает стиль правой границы элемента, значения из border-style
div {
border-right-style: none;
}
Задает ширину правой границы, значения из border-width
div {
border-right-width: 3em;
}
Определяет зазор между границами смежных ячеек таблицы
td {
border-spacing: "0";
/* границы соседних ячеек будут двойными, уберем это */
border-collapse: collapse;
}
td {
border-spacing: 5px 10px;
}
Задает стиль границ элемента
none - по умолчанию
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div {
border-style: solid dotted dashed double;
}
Задает в скоращенном виде свойства верхней границы элемента: ширина, стиль, цвет
div {
border-top: 1px solid red;
}
Задает цвет верхней границы элемента
div {
border-top-color: #000;
}
Задает стиль верхней границы элемента, значения из border-style
div {
border-top-style: none;
}
Задает ширину верхней границы, значения из border-width
div {
border-top-width: 3em;
}
Задает ширину границ
thin
medium - по умолчанию
thick
число
div {
border-width: 3em 1em 2em 3.5em;
}
Внешний отступ от границ элемента
div {
margin: 2em 3em 2.5em 0;
}
Внешний отступ от нижней границы
div {
margin-bottom: 20px;
}
Внешний отступ от левой границы
div {
margin-left: 20px;
}
Внешний отступ от правой границы
div {
margin-right: 20px;
}
Внешний отступ от верхней границы
div {
margin-top: 20px;
}
Задает в сокращенном виде свойства границ элемента, которые не учитываются в размерах элемента.
div {
outline: 3px solid #F33;
}
Цвет контура
div {
outline-color: #F33;
}
Тип контура
div {
outline-style: dashed;
}
Толщина контура
div {
outline-width: 3px;
}
Внутренний отступ от границ
td {
padding: 1px 2px 3px 4px;
/* 1 - верх и низ, 2 - слева и справа*/
padding: 1px 2px;
/* 1 - верх, 2 - слева и справа, 3 - низ*/
padding: 1px 2px 3px;
}
Внутренний отступ от нижней границы
div {
padding-bottom: 20px;
}
Внутренний отступ от левой границы
div {
padding-left: 20px;
}
Внутренний отступ от правой границы
div {
padding-right: 20px;
}
Внутренний отступ от верхней границы
div {
padding-top: 20px;
}