border

Общее
border-radius
Нарисуем лимон
border-style

Общее

Свойство border позволяет рисовать рамку вокруг блочного элемента.

Однопиксельная сплошная рамка:

border: 1px solid black;

Настройки действуют на все четыре стороны рамки. В первом параметре указываем ширину рамки, во втором - тип рамки (solid, dotted, dashed и др.), в третьем цвет - предопределённый или заданный через #xxxxxx.

Можно разбить свойство по отдельности.

border-width: thick;
border-style: solid;
border-color: black;

У свойства border-width есть три параметра: thin, medium, thick. Или указываем точное число в пикселях.

Если необходимо менять цвет границы при наведении на объект, то напрашивается следующее:

.box {
    border: 1px solid red;
}
.box:hover {
    border: 1px solid green;
}

Но если мы меняем только цвет, то правильнее написать такой код.

.box {
    border: 1px solid red;
}
.box:hover {
    border-color: green;
}

Поместите мышку внутрь текста.

border-radius

Свойство border-radius появился в CSS3 для отображения закругленных углов. Сейчас работает во всех современных браузерах без префиксов. Радиус можно указывать как в пикселях, так и в процентах.

.box {
    padding: 25px;
    background-color: grey;
    border-radius: 20px;
}

Блок с закругленными краями.
Радиус равен 20 пикселям.

Если указать 50% и одинаковые ширину и высоту, то получим круг.

.box {
    padding: 25px;
    background-color: grey;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Круглый блок

Для каждого угла можно назначить свой радиус закругления:

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

Всю конструкцию можно уложить в одну строку. Перечисление идёт по часовой стрелки, начиная с верхнего левого угла:

/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

Нарисуем лимон:

.lemon {
   width: 200px; 
   height: 200px; 
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}

К параметру border-radius можно применять два значения, используя "/", например: border-radius: 50px / 100px; /* horizontal radius, vertical radius */

Это то же самое, что:

border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

.box {
    width: 200px; height: 200px;
    background: #e3e3e3;
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}

эффект скрученной бумаги

border-style

solid, dashed, dotted — самые популярные значения параметра border-style. Кроме них используются также groove и ridge.

border: 20px groove #e3e3e3;

По отдельности:

border-width: 20px;
border-style: groove;
border-color: #e3e3e3;

Groove

Ridge

Для создания двойной рамки можно к свойству border добавить другое свойство outline, которое тоже рисует рамку.

.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}

Двойная рамка

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать псевдоэлементы:

.box {
    width: 200px; height: 200px;
    background: #e3e3e3;
    position: relative;
    border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
    border: 5px solid red;
    outline: 5px solid yellow;
}
.box:before {
    border: 10px solid blue;
}

Несколько рамок

Еще один способ с применением теней:

.box {
    border: 5px solid red;
    box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

Рамки при помощи теней

Дополнительные материалы

Рисуем треугольники

Геометрические фигуры

CSS: интересные возможности border-radius

Реклама