border¶

box-shadow¶

Тень вокруг элемента

div {
    box-shadow: inset 4px 4px 3px 5px #999999 2px 2px 5px black;
}

border¶

Задает в сокращенном виде свойства границ элемента: ширину, стиль, цвет линии

border: 1px solid red;

border-bottom¶

Задает в скоращенном виде свойства нижней границы элемента: ширина, стиль, цвет

div {
    border-bottom: 1px solid red;
}

border-bottom-color¶

Задает цвет нижней границы элемента

div {
    border-bottom-color: #000;
}

border-bottom-style¶

Задает стиль нижней границы элемента, значения из border-style

div {
    border-bottom-style: none;
}

border-bottom-width¶

Задает ширину нижней границы, значения из border-width

div {
    border-bottom-width: 3em;
}

border-color¶

Задает цвет границ

div {
    border-color: #000;
}

border-left¶

Задает в скоращенном виде свойства левой границы элемента: ширина, стиль, цвет

div {
    border-left: 1px solid red;
}

border-left-color¶

Задает цвет левой границы элемента

div {
    border-left-color: #000;
}

border-left-style¶

Задает стиль левой границы элемента, значения из border-style

div {
    border-left-style: none;
}

border-left-width¶

Задает ширину левой границы, значения из border-width

div {
    border-left-width: 3em;
}

border-radius¶

Скругляет углы границ элемента

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%;

border-right¶

Задает в скоращенном виде свойства правой границы элемента: ширина, стиль, цвет

div {
    border-right: 1px solid red;
}

border-right-color¶

Задает цвет правой границы элемента

div {
    border-right-color: #000;
}

border-right-style¶

Задает стиль правой границы элемента, значения из border-style

div {
    border-right-style: none;
}

border-right-width¶

Задает ширину правой границы, значения из border-width

div {
    border-right-width: 3em;
}

border-spacing¶

Определяет зазор между границами смежных ячеек таблицы

td {
    border-spacing: "0";
    /* границы соседних ячеек будут двойными, уберем это */
    border-collapse: collapse;
}

td {
    border-spacing: 5px 10px;
}

border-style¶

Задает стиль границ элемента

none - по умолчанию
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

div {
    border-style: solid dotted dashed double;
}

border-top¶

Задает в скоращенном виде свойства верхней границы элемента: ширина, стиль, цвет

div {
    border-top: 1px solid red;
}

border-top-color¶

Задает цвет верхней границы элемента

div {
    border-top-color: #000;
}

border-top-style¶

Задает стиль верхней границы элемента, значения из border-style

div {
    border-top-style: none;
}

border-top-width¶

Задает ширину верхней границы, значения из border-width

div {
    border-top-width: 3em;
}

border-width¶

Задает ширину границ

thin
medium - по умолчанию
thick
число

div {
    border-width: 3em 1em 2em 3.5em;
}

margin¶

Внешний отступ от границ элемента

div {
    margin: 2em 3em 2.5em 0;
}

margin-bottom¶

Внешний отступ от нижней границы

div {
    margin-bottom: 20px;
}

margin-left¶

Внешний отступ от левой границы

div {
    margin-left: 20px;
}

margin-right¶

Внешний отступ от правой границы

div {
    margin-right: 20px;
}

margin-top¶

Внешний отступ от верхней границы

div {
    margin-top: 20px;
}

outline¶

Задает в сокращенном виде свойства границ элемента, которые не учитываются в размерах элемента.

div {
    outline: 3px solid #F33;
}

outline-color¶

Цвет контура

div {
    outline-color: #F33;
}

outline-style¶

Тип контура

div {
    outline-style: dashed;
}

outline-width¶

Толщина контура

div {
    outline-width: 3px;
}

padding¶

Внутренний отступ от границ

td {
    padding: 1px 2px 3px 4px;

    /* 1 - верх и низ, 2 - слева и справа*/
    padding: 1px 2px;

    /* 1 - верх, 2 - слева и справа, 3 - низ*/
    padding: 1px 2px 3px;
}

padding-bottom¶

Внутренний отступ от нижней границы

div {
    padding-bottom: 20px;
}

padding-left¶

Внутренний отступ от левой границы

div {
    padding-left: 20px;
}

padding-right¶

Внутренний отступ от правой границы

div {
    padding-right: 20px;
}

padding-top¶

Внутренний отступ от верхней границы

div {
    padding-top: 20px;
}