Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.
CSS3 border позволяет изменять внешний вид элемента. CSS границы является одним из широко используемых свойств CSS. С помощью CSS3 можно указать стиль, цвет и ширину границы элемента.
Стиль CSS3 границы:
Стиль для каждой стороны CSS границы элемента, таких как -верхняя, нижняя или боковая, может быть задан в стиле индивидуально. В CSS3 доступны различные типы стилей границы все они перечислены ниже.
- none
- hidden
- dotted
- dashed
- solid
- double
- dot-dash
- dot-dot-dash
- wave
- groove
- ridge
- inset
- outset
Пример CSS3 стиля границы:
.borderStyle{
border-style:dashed;
}
Примечание: нет никакого способа контролировать расстояние между точками и тире.
Цвет границы (Border-color):
Атрибут “border-color” устанавливает цвет границы. Это может быть либо шестнадцатеричное значение, либо RGBA, или названия цветов, как красный, зеленый, синий ..
Примечание: вы должны установить стиль границы перед использованием свойства цвета.
Пример настройки цвета границ:
.borderStyle{
border-style:dotted;
border-color:#CCC;
}
Ширина границы (Border-width):
Атрибут “Border-width” контролирует ширину границы, которая измеряется в пикселях.
Пример настройки ширины:
.borderStyle{
border-style:dotted;
border-color:#CCC;
border-width:5px;
}
Пример объединённых стилей:
.borderStyle{
border:dashed 7px #0099FF;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:6px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
Радиус границы CSS3:
Закругленными CSS углами пользуются в течение длительного времени. Теперь можно создавать закругленные углы без использования изображений в CSS3.
В этом уроке мы увидим, как создавать простые CSS3 закругленные углы или как управлять радиусом границы в CSS3. Прежде, чем идти в глубь свойств давайте посмотрим совместимость и простой радиус границы.
Таблица совместимости CSS3 радиуса:
Простой CSS3 Радиус границы:
Ниже простой пример использования радиус CSS3 границы.
.class {
border-radius: 20px;
}
Чтобы сделать совместимость с Firefox и WebKit браузерами необходимо добавить префикс.
.borderStyle{
border:dashed 6px #000000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}
CSS3 круг с использованием радиуса границы:
Мы можем легко сделать круг в CSS без изображений, только с использованием CSS3 радиуса границы.
.borderStyle{
border:dashed 4px #000000;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright:100px;
-moz-border-radius-bottomleft:100px;
-moz-border-radius-bottomright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-webkit-border-bottom-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}
Ниже код для совместимости с IE. IE9 будет использовать границы радиуса по умолчанию.
.borderStyle{
border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: dashed;
border-bottom-width: 42px;
border-left-style: dashed;
border-left-width: 42px;
border-right-style: dashed;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: dashed;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
Попробуй так же: css3 border radius generator.