CSS3 границы (css3 border)

Использование параметра 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.

Оригинал / Перевод