Css border внутренние границы – Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)

Внутренняя граница в CSS. Как это сделать?

Недавно необходимо было сделать внутреннюю границу для div’a. Решил использовать стандартное значение inset для свойства border, однако оно не сработало. Тогда начал искать другое решение.

Найденное решение оказалось очень простым и сложным. Сложность его в том, чтобы к нему прийти, а легкость… Легкость в его реализации. Это к слову о том, что HTML и CSS можно выучить за неделю, но уметь с ним работать, на это надо годы практики.

Теперь о самом решении. Поскольку конструкция
.border-inset {
border: 1px red solid inset;
}

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

Следующий код сделает нам внутреннюю черную границу у элемента:

.border-inset {
box-shadow: 1px 1px 0 #000 inset, -1px -1px 0 #000 inset;
}

Поясню как это работает: свойство box-shadow задает тень для элемента. У него есть несколько значений, которыми мы можем управлять, а именно: сместить тень по горизонтали, по вертикали, размыть тень, растянуть тень и задать цвет тени.

Само по себе свойство box-shadow позволяет нам использовать несколько наборов параметров через запятую, что мы и сделали.

Если говорить простым языком, мы сначала сместили тень на 1px по горизонтали и на 1px по вертикали, установили степень размытия 0, задали цвет #000 (черный) и указали, что тень будет внутри нашего элемента (inset). Степень размытия у нас 0, поэтому тень будет в 1px (без размытия). Таким образом мы указали левую и верхнюю границы. Затем мы добавили еще один набор значений (с отрицательными значениями), чтобы добавить правую и нижнюю границы.

Вот и все, таким простым способом мы сделали внутреннюю границу у элемента. Применять можно как к простому div’у, так и любому другому элементу, включая изображения. Вот, кстати, еще один из способов применения тени. Здесь я верстал обычную ссылку <a>, но не совсем стандартного вида.

СSS Границы

Свойство границы

CSS свойство border позволяет определить стиль, ширину и цвет границы элемента.

Установлены границы со всех сторон.

Установлена красная нижняя граница

Установлены закругленные границы.

Установлена синяя левая граница.

Стиль границ

Свойство border-style указывает, какие границы отображать на дисплее.

Значения которые разрешены:

• dotted — Определяет границу штрихом
• dashed — Определяет границу пунктиром
• solid — Определяет границу сплошной
• double — Определяет границу двойной
• groove — Определяет 3D границу желобом. Эффект зависит от значение border-color
• ridge — Определяет 3D границу коньком. Эффект зависит от значение border-color
• inset — Определяет 3D границу вставкой. Эффект зависит от значение border-color
• outset — Определяет 3D границу начальной. Эффект зависит от значение border-color
• none — Определяет без границ
• hidden — Определяет скрытые границы

Свойство border-style может иметь от одного до четырех значений: по часовой стрелке: top (сверху), right (справа), bottom (снизу), left (слева).

Пример

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Штрихованные границы.

Пунктирные границы.

Сплошные границы.

Двойные границы.

Границы желобом. Эффект зависит от значение border-color.

Границы коньком. Эффект зависит от значение border-color.

Границы вставкой. Эффект зависит от значение border-color.

Границы начальные. Эффект зависит от значение border-color.

Границ нет.

Границы скрыть.

Смешанные границы.

Примечание: Ни одно из свойств границ CSS описаны ниже не будут иметь никакого эффекта, если не установлено свойство border-style!

Ширина границ

Свойство border-width задает ширину четырех границ.

Ширина может быть установлена размером в ( px, pt, cm, em, т.п.) или с помощью одного из трех предопределенных значений: thin (тонкий), medium (средний), или thick (толстый).

Свойство border-width может иметь от одного до четырех значений: по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева).

5px border-width

Пример

p.two {
   border-style: solid;
   border-width: medium;
}

p.three {
   border-style: solid;
   border-width: 2px 10px 4px 20px;
}

Цвет границ

Свойство border-color используется для установки цвета четырех границы.

Цвет может быть установлен:

• Название — укажите название цвета, "red"
• Hex — укажите шестнадцатеричное значение, "#ff0000"
• RGB — укажите значение RGB, "rgb(255,0,0)"
• прозрачность

Свойство border-color может иметь от одного до четырех значений по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева).

Если свойствоborder-color не установлено, оно наследует цвет элемента.

Границы красные

Пример

p.two {

p.three {
   border-style: solid;
   border-color: red green blue yellow;
}

Границы — Отдельных сторон

Из приведенных выше примеров Вы видели, что можно указать разные границы для каждой стороны.

В CSS, есть также свойства для задания каждой из границ по часовой стрелке: top (сверху), right (справа), bottom (сверху) и left (слева):

Границы разных стилей

Пример

p {
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: solid;
}

В приведенном выше примере задается такой же результат, как этот:

Вот, как это работает:

Если, свойство border-style имеет четыре значения:

• border-style: dotted solid double dashed;
  • Граница сверху будет штрихом
  • Граница справа будет сплошной
  • Граница снизу будет двойной
  • Граница слева будет пунктирной

Если, свойство border-style имеет три значения:

• border-style: dotted solid double;
  • Граница сверху будет штрихом
  • Границы справа и слева будут сплошными
  • Граница снизу будет двойной

Если, свойство border-style имеет два значения:

• border-style: dotted solid;
  • Границы сверху и снизу будут штрихом
  • Границы справа и слева будут сплошными

Если, свойство border-style имеет одно значение:

• border-style: dotted;
  • все четыре границы будут штрихом

Свойство border-style используется в приведенном выше примере. Тем не менее, оно также работает с border-width и border-color.

Граница — сокращенное свойство

Как Вы можете видеть из приведенных выше примеров, есть много свойств, которые нужно учитывать при работе с границами.

Чтобы сократить код, можно также задать индивидуальные свойства границы в одно свойство.

Свойство border является сокращенным свойством для следующих индивидуальных свойств границы:

• border-width
• border-style (требуется)
• border-color

Вы также можете задать индивидуальные свойства границ, только для одной стороны:

Левая граница

p {
   border-left: 6px solid red;
   background-color: lightgrey;
}

Результат:

Нижняя граница

p {
   border-bottom: 6px solid red;
   background-color: lightgrey;
}

Результат:

Закругленные границы

Свойство border-radius используется для добавления закругленных границ элемента:

Границы нормальные

Границы закругленные

Границы круглее

Границы еще круглее

Примечание: Свойство border-radius

Еще примеры

Все свойства границы в одном объявлении
В этом примере показано, сокращенное свойство для установки всех свойств для верхней границы в одном объявлении.

Установить стиль нижней границы
В этом примере показано, как задать стиль нижней границы.

Установить ширину левой границы
В этом примере показано, как задать ширину левой границы.

Установить цвет четырех границ
В этом примере показано, как задать цвет из четырех границ. Свойство может иметь от одного до четырех цветов.

Установить цвет правой границы
В этом примере показано, как настроить цвет правой границы.

Проверьте себя с помощью упражнений!

Все CSS свойства границ

использование явного объявления и сокращений

От автора: на днях я столкнулся с необходимостью установить границы элемента CSS с трех сторон и подумал, что было бы интересно рассмотреть всевозможные способы сделать это. Ни один из них не является особенно сложным, но, возможно, вы считаете один из них наилучшим из-за четкости синтаксиса, эффективности или чего-то другого.

Предположим, нам нужна граница внизу, слева и справа (но не сверху) элемента.

Явное объявление для каждой стороны

.three-sides { border-bottom: 2px solid black; border-right: 2px solid black; border-left: 2px solid black; }

Хотя это довольно понятно, здесь все еще используется сокращение. Полностью свойства выглядели бы так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

.three-sides { border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: black; border-left-style: solid; border-left-width: 2px; border-right-color: black; border-right-style: solid; border-right-width: 2px; }

Заблокировать одну из сторон

Вы можете получить небольшое количество кода, объявив сокращением границу со всех четырех сторон, а затем удалив ту, которая не нужна:

.three-sides { border: 2px solid black; border-top: 0; }

Только сокращенная ширина

.three-sides { border-color: black; border-style: solid; /* top, right, bottom, left — так же, как для margin и padding */ border-width: 0 2px 2px 2px; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Здесь все довольно интересно, так как вам не нужно объявлять цвет границы, чтобы получить границу, потому что цвет наследует currentColor! Так что это будет нормально работать:

.three-sides { /* цвет не объявлен */ border-style: solid; border-width: 0 2px 2px 2px; }

И вы получили бы красные границы, если бы сделали:

.three-sides { border-color: red; border-style: solid; border-width: 0 2px 2px 2px; }

Удивительно, но факт. Если вы хотите указать цвет явно, то можете использовать парочку сокращений, примерно так:

.three-sides { border: solid green; border-width: 2px 0 2px 2px; }

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Свойство border-image-outset | CSS справочник

Определение и применение

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

• Для свойства border-image-outset можно указать от одного до четырех значений (top, right, bottom и left). Порядок указания значений можно запомнить, традиционно используя слово TRouBLe. Если четвертый параметр опущен, он такой же, как второй. Если третий тоже опущен, то он такой же, как первый. А если и второй опущен, то он будет такой же, как первый.

Поддержка браузерами

CSS синтаксис:

border-image-outset:"length | number | initial | inherit";

/* значение применяется ко всем сторонам */
border-image-outset: 3;

/* первое значение применяется к горизонтали(top и bottom), а второе к вертикали (right и left) */
border-image-outset: 10px 15px;

/* первое значение - top, второе применяется к вертикали (right и left), а третее к bottom */
border-image-outset: 5px 10px 15px;

/* по порядку: top right bottom left */
border-image-outset: 5em 10px 2em 3em;

JavaScript синтаксис:

object.style.borderImageOutset = "10px"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Использование свойства border-image-outset</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
background : yellow; /* устанавливаем цвет заднего фона */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
padding : 15px; /* устанавливаем внутренние отступы со всех сторон элемента */
margin-right : 50px; /* устанавливаем величину отступа от правого края элемента */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-outset : 0;}  /* граница изображения не выходит за пределы блока границы (по умолчанию) */
.test2 {border-image-outset : 20px;}  /* граница изображения выходит за пределы блока границы со всех сторон на 20px  */
.test3 {border-image-outset : 30px 25px;}  /* граница изображения выходит за пределы блока границы сверху и снизу по 30px, слева и справа по 25 пикселей */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">outset 0</div>
		<div class = "test2">outset 20px</div>
		<div class = "test3">outset 30px 25px</div>
	</body>
</html>

В этом примере с помощью свойства border-image-outset мы указали различные значения величины, на которую область границы изображения выходит за пределы блока границы. Кроме того, с использованием свойства border-image-source указали путь к изображению, которое использовано в качестве границы и свойством border-image-slice задали смещение внутрь от верхней, правой, нижней и левой кромки изображения.

Результат нашего примера:

CSS Границы

Свойства CSS Пограничные

В CSS border свойства позволяют задать стиль, ширину и цвет границы элемента.

Этот элемент имеет границу канавку, которая 15px в ширину и зеленый.

Пограничный Стиль

border-style свойство определяет , какой вид границы , чтобы отобразить.

Следующие значения допускаются:

• dotted — Определяет пунктирную рамку ,
• dashed — Определяет пунктирную границу
• solid — Определяет твердую границу
• double — Определяет двойную границу
• groove — Определяет рифленую границу 3D. Эффект зависит от величины границы цвета
• ridge — Определяет ребристую границу 3D. Эффект зависит от величины границы цвета
• inset — Определяет границы 3D врезку. Эффект зависит от величины границы цвета
• outset — Определяет 3D боковик границу. Эффект зависит от величины границы цвета
• none — не определяет границы
• hidden — Определяет скрытую границу

border-style свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы, а также левой границы).

пример

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Рамка блока в CSS

Создание рамки блока

У блока может быть рамка. Она обозначает границы блока. При этом внутренний отступ, находится внутри блока, то есть внутри рамки, а внешний отступ снаружи рамки. Рамка занимает своё место на странице и не входит ни во внешний отступ, ни во внутренний. Для создания рамки нужно указать три свойства: ширину рамки, стиль рамки и цвет.

Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:

border-width: medium — средняя (по умолчанию)

border-width: thin — тонкая

border-width: thick — толстая

border-width: ширина в единицах измерения CSS

border-width: inherit — значение принимается от родительского элемента

Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

Стиль рамки устанавливается с помощью свойства border-style. В зависимости от этого свойства рамки выгдядят по-разному. Далее приведены значения этого свойства и стили, которые они устанавливают.

При маленькой ширине рамка может выглядеть несколько по-другому.

Кроме указанных значений, свойство border-style может принимать следующие значения:

border-style: none — отсутствие рамки

border-style: hidden — то же, что и none, применяется к ячейке таблицы

border-style: inherit — значение принимается от родительского элемента

Цвет рамки устанавливает свойство border-color. Значением свойства является цвет, указанный одним из способов, существующих в CSS.

Создадим блок и зададим ему рамку.

Стиль:

+

#div1
  {
  border-width: 1px;
  border-style: solid;
  border-color: Red;
  }

HTML код:

<div>Блок с рамкой</div>

Попробуйте задать блоку рамку с другими значениями свойств.

Сокращённая запись

Рамку можно создать более коротким способом. Для этого существует свойство border, в котором через пробел перечисляются свойства рамки, сначала ширина, затем стиль, затем цвет. Для примера создадим блок с такой же рамкой, но установим её с помощью сокращённой записи.

<div>Блок с рамкой</div>

Если не указать ширину или цвет, то будет использовано значение по умолчанию.

Отдельные стороны рамки

Рамку блоку можно задать не целиком, а с каждой стороны по-отдельности. У разных сторон рамки может быть отдельный стиль, с одной стороны может быть рамка, а с другой может её не быть, вобщем у Вас есть полная свобода действий.

Для создания рамки с каждой из сторон соществуют свойства border-left, border-right, border-top, border-bottom. Для примера создадим блок, у которого есть рамка только слева.

<div>Блок<br>с рамкой<br>слева</div>

Создайте рамку у этого блока с других сторон с разным видом.

Для любой стороны рамки можно указать каждое свойство отдельно:

border-left-width, border-left-style, border-left-color

border-right-width, border-right-style, border-right-color

border-top-width, border-top-style, border-top-color

border-bottom-width, border-bottom-style, border-bottom-color

Если нужно, чтобы рамка отображалась со всех сторон по-разному, можно любому из свойств рамки задать не одно значение, а четыре, для каждой из сторон. Значения перечисляются через пробел, сначала для верхней части, затем для правой, затем для нижней, а затем для левой.

Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.

Стиль:

#div2
  {
  border-width: 5px 2px 3px 7px;
  border-style: solid;
  border-color: #D118CB;
  }

HTML код:

<div>Блок с рамкой с разной шириной</div>

Свойству также можно указать два или три значения. Если указано два значения, то первое значение указывается для верхней и нижней части рамки, а второе для левой и правой. Если указано три значения, то первое значение указывается для верхней части рамки, второе значение для левой и правой части, а третье для нижней части.

СSS3 Изображение Границ

CSS3 изображение как граница

CSS свойству border-image, можно задать изображение, которое будет использоваться в качестве границы вокруг элемента.

CSS3 Свойство border-image

CSS3 свойство border-image позволяет указать изображение, которое будет использоваться вместо простой границы вокруг элемента.

Свойство border-image состоит из трех частей:

1. Изображение для использования в качестве границы
2. Где нарезать изображение
3. Определить, следует ли повторять или растягивать среднию часть

Мы будем использовать следующее изображение (называется "border.png"):

Свойство border-image принимает изображение и разрезает его на девять разделов, как доска для крестиков — ноликов. Затем оно помещается из угла в углах, и средние часть повторяется или растягивается по мере указания.

Примечание: Для элемента border-image, для работы также требуется набор свойств border!

Здесь, средняя часть изображения повторяется для создания границы:

Изображение как граница!

Вот код:

Пример

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 round;
}

Здесь, средняя часть изображения растягиваются для создания границы:

Изображение как граница!

Вот код:

Пример

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 stretch;
}

Совет: Свойство border-image сокращенное свойство для свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

CSS3 изображение граница — различные значения

Различные значения свойст полностью изменят внешний вид границы:

Пример 1:

border-image: url(border.png) 50 round;

Пример 2:

border-image: url(border.png) 20% round;

Пример 3:

border-image: url(border.png) 30% round;

Вот код:

Пример

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30% round;
}

Проверьте себя с помощью упражнений!

Свойства CSS3 изображение границ