Свойство border объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.
Несколько примеров использования:
- Рамка вокруг элемента
CSS
.help {
border: 5px solid red; /* рамка вокруг текста */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
HTML
<div class="help">Привет!!!</div>
- Задаем цвет и ширину рамки отдельно по сторонам
border-top (верхняя граница)
border-right (правая граница)
border-bottom (нижняя граница)
border-left (левая граница)
.help {
border-left: 10px solid red;
border-right:10px solid #000000;
border-top: 10px solid green;
border-bottom: 10px solid #777;
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
- Свойство border-style задает стиль для четырех границ. Это свойство может иметь от одного до четырех значений
.help {
border-style:dotted solid double dashed; /* верхняя граница в-точку - правая граница обычная - нижняя граница двойная - левая граница в-тире */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина рамки */
}
.help {
border-style:dotted solid double dashed; /* верхняя граница в-точку - правая граница обычная - нижняя граница двойная - левая граница в-тире */
border-width: 5px; /* ширина рамки */
border-color: red; /* цвет рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
- Свойство border-color задает цвет для четырех границ. Это свойство может иметь от одного до четырех значений.
.help {
border-style: solid; /* граница обычная */
border-width: 5px; /* ширина рамки */
border-color: red #555 #cdcdcd green; /* цвет рамки (до 4-х значений) */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
- Свойство border-radius позволяет установить радиус скругления уголков рамки
.help {
border: 5px solid #cdcdcd; /* ширина рамки и цвет */
border-radius: 25px; /* радиус углов рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
.help {
border: 5px solid #cdcdcd; /* ширина рамки и цвет */
border-radius: 25px 25px 0px 0px; /* радиус углов рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
}
.help {
border: 3px dotted #777; /* ширина рамки и цвет */
border-radius: 100px; /* радиус углов рамки */
padding: 10px; /* Поля вокруг текста */
width: 100px; /* ширина элемента */
}
- Закругляем углы отдельно по сторонам
.help {
border: 2px solid red; /* ширина рамки и цвет */
border-top-right-radius: 25px; /* Задаем радиус рерхнего правого угла */
border-top-left-radius: 10px; /* Задаем радиус рерхнего левого угла */
padding: 10px; /* Поля вокруг текста */
width: 100px; /* ширина элемента */
}
