Главная css Рамки

Рамки (CSS)

Параметр Значение Описание
border-top-color
border-right-color
border-left-color
border-bottom-color
border-color		 цвет
нет цвета ( по умолчанию) 		Параметр определяет цвет четырех сторон рамок.
Если вместо цвета подставить URL-адрес изображения, оно будет повторяться, образуя рамку.
border-top-style
border-right-style
border-left-style
border-bottom-style
border-style 		none (по умолчанию)
solid
double
groove
ridge
inset
outset		 Определяют стиль четырех сторон рамок.
border-top
border-right
border-left
border-bottom
border		 ширина_рамки,
стиль_рамки,
цвет

(по умолчанию:
medium, none, нет цвета)

 Определяют свойства четырех сторон рамок.

ширина_рамки может быть значением medium, thin или thick или задана в единицах измерения.
стиль_рамки может иметь значение none или solid.

Аргумент color используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес изображения, то рисунок будет повторяться, заполняя контур рамки.
border-top-width
border-right-width
border-left-width
border-bottom-width
border-width 		medium (по умолчанию)
thin
thick
длина		 Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим параметром. Можно заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin.
ciip rect
auto (по умолчанию)		 Определяет, какая часть элемента видна (/top/right/bottom/left/). Все, что находится за пределами области, указанной этим параметром, увидеть нельзя.
display "", none Этот параметр указывает, будет ли отображен элемент.
float none (по умолчанию)
left
right		 Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ними. Поддерживается тегами <div>, <span> ...
height auto (по умолчанию)
длина		 Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение возвращаются в виде строки, включающей единицы измерения (px, % и т.д.). Для получения числового значения используется свойство posHeight.
left auto (по умолчанию)
длина
проценты		 Задают горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (px, % и т.д.). Для получения значения в виде числа используется свойство posLeft.

Стиль рамки

Пример 1
Рамка 1
<style>
.rama1 {border: dashed 2px red;
background-color: #baddfa; width:50%;}
</style>
<div class="rama1">Рамка 1</div>

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения border: Результат
none Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
Нет границы {border:none;}
hidden Эквивалентно none.
solid
solid
Есть граница {border: 1px solid #b1500f;}
dotted
dotted
В точку {border:2px dotted #b1500f;}
dashed
dashed
Тире {border:3px dashed;}
double
double
Двойная граница {border: double;}
groove
groove
Углубление {border:10px groove #daa25e; padding:5px;}
ridge
ridge
Ребристая {border:10px ridge #daa25e;}
inset
inset
Вдавленная {border:10px inset #c2bc93;padding:5px;}
outset
outset
Выпуклая {border:10px outset #c2bc93;}
{1,4}

Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства
border-style:
{border-style: solid dotted none dotted;
border:5px #b1500f;}

initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Пример 2
Обтекание картинки с рамкой текстом

logo.png
Картинка находится справа, а текст обтекает ее. У картинки есть отступы (параметр margin) с левого края и снизу, чтобы текст не прилипал к картинке. Создана серая рамка вокруг изображения.

CSS:
.floatright {float:right; margin:0 0 5px 10px; border:20px inset green;}

HTML:
<img class="floatright" src="logo.png"> Свой текст ...

 

❗ Для отмены обтекания картинки используется
свойство clear (отмена):
<div style="clear: right;"></div>

Пример 3
Вертикальная рамка
CSS:
<style>
p.line1 {
  border-left: 3px dotted red; padding: 5px;
}
p.line2 {
  border-left: 10px solid green; padding: 10px;
  background:#d9ffd9;
}
</style>
HTML:

<p class="line1">Текст 1 <br>Текст 1</p>
<p class="line2">Текст 2 <br>Текст 2</p>

Результат

Текст 1
Текст 1

Текст 2
Текст 2

Пример 4

Рамка с круглыми углами


{border-radius: 10px 10px;}

{border-radius: 50%;}

{border-radius: 10px 30px;}

Пример 5
Градиентная рамка
CSS/HTML
<style>
.grad-bord {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 3px solid;
  border-image: linear-gradient(20deg, #9e03f8 35%, #1af72c 65%);
  border-image-slice: 1;
}
</style>

<div class="grad-bord">Градиентная рамка</div>

Картинка в рамке
<img class="grad-bord" src="images/picture.jpg">
Результат Примера 5

Градиентная рамка

Картинка в рамке

Привет Мир!