html.okpython.net
HTML и CSS для начинающих

CSS :: Границы элементов

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

Для установки границ элементов CSS предоставляет целый набор свойств, позволяющих задать стиль, толщину и цвет границ как по отдельности для каждой из сторон элемента, так и для всех сторон одновременно. Свойств достаточно много, но описывать их все по отдельности мы не будем, т.к. они очень похожи по своему назначению и легко разбиваются на группы.

Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример №1). Все они могут принимать ряд значений, которые определяют внешний вид границы:

  • none – граница не отображается, браузер обнуляет ее толщину (значение используется по умолчанию);
  • hidden – в принципе тоже самое, что и none, за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse, граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек;
  • dotted – линия границы будет иметь точечный вид;
  • dashed – линия границы будет иметь пунктирный вид;
  • solid – линия границы будет сплошной;
  • double – линия границы будет двойной;
  • groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности;
  • ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости;
  • inset – линия границы будет иметь объемный вид с эффектом вдавленности;
  • outset – линия границы будет иметь объемный вид с эффектом выпуклости.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<title>Установка границ элементов</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Стили границ по отдельности */
		.border_1{
		border-top-style: solid;
		border-right-style: dashed;		
		border-bottom-style: groove;		
		border-left-style: double;
		}
		
	</style>
	
</head>
<body>
	
	<p class="border_1">
		Стили границ по отдельности<br>
		border-top-style: solid;<br>
		border-right-style: dashed;<br>		
		border-bottom-style: groove;<br>		
		border-left-style: double;
	</p>
		
</body>
</html>

Пример №1. Определение стиля границ элементов

Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример №2):

  • одно значение – стиль задается для всех четырех сторон элемента;
  • два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – границы устанавливаются по часовой стрелке: верхняя, правая, нижняя и левая.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Сокращенное свойства border-style</title>
	
	<style>
		
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Четыре значения */
		.border_1{
		border-style: none dotted dashed solid;
		}
				
		/* Три значения */
		.border_2{
		border-style: double groove ridge;		
		}
		
		/* Два значения */
		.border_3{
		border-style: inset outset;		
		}
		
		/* Одно значение */
		.border_4{
		border-style: dashed;		
		}		
		
	</style>
	
</head>
<body>

	<p class="border_1">
		Четыре значения<br>
		border-style: none dotted dashed solid;
	</p>
	
	<p class="border_2">
		Три значения<br>
		border-style: double groove ridge;
	</p>
	
	<p class="border_3">
		Два значения<br>
		border-style: inset outset;
	</p>
	
	<p class="border_4">
		Одно значение<br>
		border-style: dashed;
	</p>
		
</body>
</html>

Пример №2. Использование сокращенного свойства border-style

Ширина границ элемента,
css-свойство border-width и его производные

Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример №3). Все они могут принимать ряд значений, которые определяют ширину границы:

  • ширина – принимаются любые единицы измерения, используемые в CSS;
  • thin – устанавливает тонкую границу;
  • medium – устанавливает среднюю границу;
  • thick – устанавливает толстую границу.

Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения:

  • одно значение – ширина задается для всех четырех сторон элемента;
  • два значения – первое значение задает ширину верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает ширину верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – ширина границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка ширины границ элементов</title>

	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Переопределяем ширину границ */
		
		/* Ширина границ по отдельности */
		.border_1{
		border-top-width: thin;
		border-right-width: 3px;		
		border-bottom-width: thick;		
		border-left-width: 0.8em;
		}
		
		/* Четыре значения в сокращенном свойстве */
		.border_2{
		border-width: thin medium thick 10px;
		}
				
		/* Три значения в сокращенном свойстве */
		.border_3{
		border-width: 1px medium 0.5em;		
		}
		
		/* Два значения в сокращенном свойстве */
		.border_4{
		border-width: 0.1em 0.3em;		
		}
		
		/* Одно значение в сокращенном свойстве */
		.border_5{
		border-width: 5px;		
		}			
		
	</style>
	
</head>
<body>
	
	<p class="border_1">
		Ширина границ по отдельности<br>
		border-top-width: thin;<br>
		border-right-width: 3px;<br>		
		border-bottom-width: thick;<br>		
		border-left-width: 0.8em;
	</p>
	
	<p class="border_2">
		Четыре значения<br>
		border-width: thin medium thick 10px;
	</p>
	
	<p class="border_3">
		Три значения<br>
		border-width: 1px medium 0.5em;
	</p>
	
	<p class="border_4">
		Два значения<br>
		border-width: 0.1em 0.3em;
	</p>
	
	<p class="border_5">
		Одно значение<br>
		border-width: 5px;
	</p>
	
</body>
</html>

Пример №3. Установка ширины границ элементов

Цвет границ элемента,
css-свойство border-color и его производные

Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример №4). Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму:

  • одно значение – цвет задается для всех четырех сторон элемента;
  • два значения – первое значение задает цвет верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает цвет верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – цвет границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Установка цвета границ элементов</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px;
		}
		
		/* Цвета границ через слова */
		.border_1{
		border-left-color: black;
		border-right-color: red;
		border-top-color: green;
		border-bottom-color: blue;
		}

		/* Цвета границ в rgb */
		.border_2{
		border-left-color: #000000;
		border-right-color: #FF0000;
		border-top-color: #00FF00;
		border-bottom-color: #0000FF;	
		}
		
		/* Цвета границ в rgba */
		.border_3{
		border-left-color: rgba(0,0,0,0.7);
		border-right-color: rgba(255,0,0,0.7);
		border-top-color: rgba(0,255,0,0.7);
		border-bottom-color: rgba(0,0,255,0.7);		
		}
		
		/* Цвета границ в hsl */
		.border_4{
		border-left-color: hsl(0,0%,0%);
		border-right-color: hsl(0,100%,50%);
		border-top-color: hsl(120,100%,50%);
		border-bottom-color: hsl(240,100%,50%);		
		}
		
		/* Цвета границ в hsla */
		.border_5{
		border-left-color: hsla(0,0%,0%,0.5);
		border-right-color: hsla(0,100%,50%,0.5);
		border-top-color: hsla(120,100%,50%,0.5);
		border-bottom-color: hsla(240,100%,50%,0.5);		
		}		
		
		/* Цвета границ в сокращенном свойстве */
		.border_6{
		border-color: #00FF00 blue rgb(255,0,0) black;
		}
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Цвета границ через слова<br>
		border-left-color: black;<br>
		border-right-color: red;<br>
		border-top-color: green;<br>
		border-bottom-color: blue;
	</p>
	
	<p class="border_2">
		Цвета границ в rgb<br>
		border-left-color: #000000;<br>
		border-right-color: #FF0000;<br>
		border-top-color: #00FF00;<br>
		border-bottom-color: #0000FF;
	</p>
	
	<p class="border_3">
		Цвета границ в rgba<br>
		border-left-color: rgba(0,0,0,0.7);<br>
		border-right-color: rgba(255,0,0,0.7);<br>
		border-top-color: rgba(0,255,0,0.7);<br>
		border-bottom:-color rgba(0,0,255,0.7);
	</p>
	
	<p class="border_4">
		Цвета границ в hsl<br>
		border-left-color: hsl(0,0%,0%);<br>
		border-right-color: hsl(0,100%,50%);<br>
		border-top-color: hsl(120,100%,50%);<br>
		border-bottom-color: hsl(240,100%,50%);
	</p>
	
	<p class="border_5">
		Цвета границ в hsla<br>
		border-left-color: hsla(0,0%,0%,0.5);<br>
		border-right-color: hsla(0,100%,50%,0.5);<br>
		border-top-color: hsla(120,100%,50%,0.5);<br>
		border-bottom-color: hsla(240,100%,50%,0.5);		
	</p>
	
	<p class="border_5">
		Цвета границ в сокращенном свойстве<br>
		border-color: #00FF00 blue rgb(255,0,0) black;		
	</p>
	
</body>
</html>

Пример №4. Установка цвета границ элементов

Универсальные css-свойства border,
border-top, border-bottom, border-right и border-left

Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример №5). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Установка границ элементов</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		color: red;
		background-color: yellow;
		}
		
		.border_1{border: solid;}
		.border_2{border: dashed 2px;}
		.border_3{border: double green;}
		.border_4{border: dotted #0000FF 10px;}
	</style>
	
</head>
<body>
	<p class="border_1">
		border: solid<br>
		По умолчанию используется цвет шрифта и<br>
		border-width: medium
	</p>
	
	<p class="border_2">
		border: dashed 2px<br>
		По умолчанию используется цвет шрифта<br> 
	</p>
	
	<p class="border_3">
		border: double green<br>
		По умолчанию: border-width: medium
	</p>
	
	<p class="border_4">
		border: dotted #0000FF 5px 
	</p>	
	
</body>
</html>

Пример №5. Установка границ элементов

Скругление границ элемента,
css-свойство border-radius и его производные

Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слеш / задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рисунок №6 и пример №7). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

Рис. №6. Схема скругления углов рамки элемента

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка радиусов границ элементов</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Скругление углов по окружности */
		.border_1{
		border-top-left-radius: 15px;
		border-top-right-radius: 30px;		
		border-bottom-right-radius: 15px;		
		border-bottom-left-radius: 30px;
		}
				
		/* Скругление углов по эллипсу */
		.border_2{
		border-top-left-radius: 1em 2.5em;
		border-top-right-radius: 1em 2.5em;		
		border-bottom-right-radius: 1em 2.5em;		
		border-bottom-left-radius: 1em 2.5em;
		}

	</style>
	
</head>
<body>
	
	<p class="border_1">
		Скругление углов по окружности<br>
		border-top-left-radius: 15px;<br>
		border-top-right-radius: 30px;<br>		
		border-bottom-right-radius: 15px;<br>		
		border-bottom-left-radius: 30px;
	</p>
	
	<p class="border_2">
		Скругление углов по эллипсу<br>
		border-top-left-radius: 1em 2.5em;<br>
		border-top-right-radius: 1em 2.5em;<br>		
		border-bottom-right-radius: 1em 2.5em;<br>		
		border-bottom-left-radius: 1em 2.5em;
	</p>
	
</body>
</html>

Пример №7. Установка радиусов границ элементов

Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения (см. пример №8):

  • одно значение – радиус задается для всех четырех углов элемента;
  • два значения – первое значение задает радиус верхнего левого и нижнего правого углов элемента (расположены по диагонали), второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали);
  • три значения – первое значение задает радиус верхнего левого угла элемента, второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали), третье – нижнего правого угла элемента;
  • четыре значения – радиусы устанавливаются по часовой стрелке для верхнего левого и верхнего правого углов, затем для нижнего правого и нижнего левого углов элемента.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Сокращенное свойство border-radius</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
						
		/* Два значения для скругления по эллипсу */
		.border_1{
		border-radius: 10px 20px / 20px 40px;		
		}
		
		/* Одно значение для скругления по эллипсу */
		.border_2{
		border-radius: 20px / 40px;		
		}
		
	</style>
	
</head>
<body>
		
	<p class="border_1">
		Два значения для скругления по эллипсу<br>
		border-radius: 10px 20px / 20px 40px;
	</p>
	
	<p class="border_2">
		Одно значение для скругления по эллипсу<br>
		border-radius: 20px / 40px;	
	</p>
		
</body>
</html>

Пример №8. Использование сокращенного свойства border-radius

Внешняя рамка элемента, css-свойства outline,
outline-style, outline-width и outline-color

Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример №9). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color, принимающего вместо специального значения transparent значение invert, которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка контура элементов</title>

	<style>

		p{
		width: 300px;
		height: 150px;
		margin: 5em;
		padding: 1em;
		}

		/* Сокращенное свойство */
		.p_1{
		border: 5px solid violet;
		outline: dashed 5px green;
		outline-offset: 10px;
		}

		/* Цвет задаем отдельно */		
		.p_2{
		border: 5px solid violet;
		outline: groove 8px;
		outline-color: invert;
		outline-offset: 5px;
		}

		/* Стиль задаем отдельно */		
		.p_3{
		border: 5px solid violet;
		outline: 5px rgba(0%,0%,100%,0.4);
		outline-style: double;
		outline-offset: 1em;
		}

		/* Ширину задаем отдельно */
		/* Контур будет внутри */		
		.p_4{
		border: 5px solid violet;
		outline: inset hsla(240,100%,50%,0.5);
		outline-width: 1em;
		outline-offset: -2em;
		}
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		Сокращенное свойство<br>
		outline: dashed 5px green;<br>
		outline-offset: 10px;
	</p> 
 
	<p  class="p_2">
		Цвет задаем отдельно<br>
		outline: groove 8px;<br>
		outline-color: invert;<br>
		outline-offset: 5px;
	</p>
 
	<p  class="p_3">
		Стиль задаем отдельно<br>		
		outline: 5px rgba(0%,0%,100%,0.4);<br>
		outline-style: double;<br>
		outline-offset: 1em;
	</p>
 
	<p  class="p_4">
		Ширину задаем отдельно<br>
		Контур будет внутри<br>
		outline: inset hsla(240,100%,50%,0.5);<br>
		outline-width: 1em;<br>
		outline-offset: -2em;
	</p>	
	
</body>
</html>

Пример №9. Установка контура элементов

Расстояние между внешней и внутренней границами,
css-свойство outline-offset

Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример №9). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.

На практике, в процессе верстки страниц желательно использовать распространенный прием обнуления всех отступов, показанный в примере №10. Дело в том, что разные браузеры могут по-разному задавать внутренние и внешние отступы элементов, что может приводить к нежелательным эффектам для веб-мастера. Поэтому лучше обнулить все отступы и задавать их самостоятельно в зависимости от конкретной ситуации.

CSS htmlCodes 
/* Обнуляем отступы */
*{
margin: 0;		/* Обнуляем внешние отступы */
padding: 0;		/* Обнуляем внутренние отступы */
outline: 0;		/* Обнуляем толщину внешней границы */
}

/* Остальные стили */

Пример №10. Обнуление отступов элементов

Создание теней, css-свойство box-shadow

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие растяжение цвет inset} (см. пример №11), где:

  • смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
  • смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
  • размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром;
  • растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент;
  • цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр;
  • inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке;
  • none – тень добавляться не будет (используется по умолчанию).
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка теней элементов</title>

	<style>
		p{
		width: 300px;
		height: 100px;
		margin-top: 7em;
		}
		
		.p_1{
		border: solid 5px red;
		background-color: yellow;
		box-shadow: 10px 10px 50px 15px blue;
		}
		
		.p_2{
		border: solid 5px orange;
		background-color: violet;
		box-shadow: 5px 5px 8px 10px blue inset,
								10px 10px 8px 10px green,
								15px 15px 8px 10px red
		}
	</style>
	
</head>
<body>
	<p  class="p_1">
		Одна тень.
	</p> 
	
	<p  class="p_2">
		Несколько теней.
	</p> 
</body>
</html>

Пример №11. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.

Быстрый переход к другим страницам

▲
▼