Css рамка внутри блока: Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании — Хабр Q&A

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

Главная > Учебник 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, в котором через пробел перечисляются свойства в таком порядке:

• ширина
• стиль
• цвет

Cоздадим блок с такой же рамкой, но установим её с помощью сокращённой записи.

<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>

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

border — CSS | MDN

Свойство CSS border это универсальное свойство для указания всех персональных свойств границ за раз: border-width, border-style (en-US), и border-color (en-US).

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание,

border: 1px;
border: 2px dotted;
border: medium dashed green;

Примечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width, border-style (en-US), и border-color

Свойство border указывается используя одно или более значений <br-width>, <br-style>, и <color> указанных ниже.

Значения

<br-width>

Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width.

<br-style>

Стиль линии границ. По умолчанию

none если отсутствует. Больше информации border-style (en-US).

<color>

Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

border = 
<line-width>  || (en-US)
<line-style>  || (en-US)
<color>       
"><line-width> = 
<length [0,∞]>  | (en-US)
thin            | (en-US)
medium          | (en-US)
thick           
"><line-style> = 
none    | (en-US)
hidden  | (en-US)
dotted  | (en-US)
dashed  | (en-US)
solid   | (en-US)
double  | (en-US)
groove  | (en-US)
ridge   | (en-US)
inset   | (en-US)
outset  

HTML

<div>Look at my borders. </div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;
  }
</style>

CSS

style {
  display: block;
  border: 1px dashed black;
}

Результат

Начальное значение	как и у каждого из подсвойств этого свойства: border-width: как и у каждого из подсвойств этого свойства: border-top-width (en-US): medium border-right-width (en-US) : medium border-bottom-width (en-US): medium border-left-width (en-US): medium border-style (en-US): как и у каждого из подсвойств этого свойства: border-top-style (en-US): none border-right-style (en-US): none border-bottom-style (en-US): none border-left-style (en-US): none border-color (en-US): как и у каждого из подсвойств этого свойства: border-top-color (en-US): currentcolor border-right-color (en-US): currentcolor border-bottom-color (en-US): currentcolor border-left-color (en-US): currentcolor
Применяется к	все элементы. Это также применяется к ::first-letter .
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: border-width: как и у каждого из подсвойств этого свойства: border-bottom-width (en-US): абсолютная длина или 0, если border-bottom-style (en-US) — none или hidden border-left-width (en-US): абсолютная длина или 0, если border-left-style (en-US) — none или hidden border-right-width (en-US): абсолютная длина или 0, если border-right-style (en-US) — none или hidden border-top-width (en-US): абсолютная длина или 0, если border-top-style (en-US) — none или hidden border-style (en-US): как и у каждого из подсвойств этого свойства: border-bottom-style (en-US): как указано border-left-style (en-US): как указано border-right-style (en-US): как указано border-top-style (en-US): как указано border-color (en-US): как и у каждого из подсвойств этого свойства: border-bottom-color (en-US): вычисленный цвет border-left-color (en-US): вычисленный цвет border-right-color (en-US): вычисленный цвет border-top-color (en-US): вычисленный цвет
Animation type	как и у каждого из подсвойств этого свойства: border-color (en-US): как и у каждого из подсвойств этого свойства: border-bottom-color (en-US): цвет border-left-color (en-US): цвет border-right-color (en-US): цвет border-top-color (en-US): цвет border-style (en-US): discrete border-width: как и у каждого из подсвойств этого свойства: border-bottom-width (en-US): длина border-left-width (en-US): длина border-right-width (en-US): длина border-top-width (en-US): длина

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• border-radius-related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 11 февр. 2023 г. by MDN contributors.

html — можно ли разместить границу внутри заполнения, используя только один div?

Задавать вопрос

спросил 8 лет, 3 месяца назад

Изменено 1 год, 10 месяцев назад

Просмотрено 26 тысяч раз

Мне просто интересно, знает ли кто-нибудь способ использовать только один div, чтобы получить эффект встроенной границы? Или я должен использовать два? Вот что я имею в виду:

В настоящее время я использую блок div с рамкой, завернутый внутрь блока div с отступами. Я должен мысленно отслеживать, какие in_wraps сочетаются с какими out_wraps. Я хотел бы просто иметь элемент на странице, который будет выглядеть так:

вместо того, чтобы использовать два div и сопоставлять их. Вот CSS, который я использую:

 .out_wrap_blk{
    отступ: 5px;
    фон: черный;
    плыть налево;
    поле: 10 пикселей;
}
.out_wrap_gry{
    отступ: 5px;
    фон: #323232;
    плыть налево;
    поле: 10 пикселей;
}
.in_wrap_grn{
    граница: 1px сплошная #0CFF0E;
    отступ: 20 пикселей;
}
.in_wrap_blk{
    граница: 1px сплошной черный;
    отступ: 20 пикселей;
}
 

Можно ли сократить это до одного элемента или мне нужно придерживаться внешнего элемента, обернутого вокруг внутреннего элемента?

• html
• css
• граница

Попробуйте это:

 #bor-outline {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: серый;
  граница: 4px сплошная #292929;
  контур: 4px сплошной #e3e3e3;
} 

 <дел>
  привет
 

1

Все, что вам нужно, это великолепие CSS layout-offset свойство:

Вот пример JSFiddle .

CSS:

 раздел {
    фон: #808080;
    поле: 20 пикселей;
    ширина: 200 пикселей;
    отступ: 20 пикселей;
    высота: 200 пикселей;
    контур: 2px сплошной черный;
    смещение контура: -16px;
}
 

Вы можете использовать псевдоэлемент:

HTML:

CSS:

 #w{ширина:300px;высота:300px; фон: серый; положение: относительное; }
#ж:после{
    содержание:"";
    положение: абсолютное;
    слева: 15 пикселей;
    верх: 15 пикселей;
    высота: 266 пикселей;
    ширина: 266 пикселей;
    граница: 2px сплошной черный;
}
 

Дж. С. Фиддл

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS Внутренняя граница | Принцип работы внутренней границы с примерами

Внутренняя граница — это не что иное, как пространство, созданное между границей и свойством или элементом контура. Мы можем применить внутреннюю границу к тексту абзацев и заголовков, содержимому таблицы и изображениям. Нет ограничения, что внутренняя граница всегда имеет только прямоугольную или квадратную форму, она может быть любой формы.

Прямоугольная форма внутренней границы:

Прямоугольная форма радиуса внутренней границы:

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

Принцип работы внутренней границы

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

Синтаксис:

 дел {
контур: 10px сплошной зеленый;
} 

Outline-offset описывает расстояние или пространство между границей и элементом контура.

Синтаксис:

 раздел{
смещение контура: 10 пикселей;
} 

Примеры синтаксиса внутренней границы CSS

Ниже приведены примеры внутренней границы CSS:

Контурная граница имеет несколько типов

• Сплошная: Граница получается сплошной, как жирный текст.
• Пунктир: Обозначает границы пунктирными линиями.
• Пунктир: Обозначает границы пунктирными линиями.
• Двойной: Делает границу двойной сплошной.
• Канавка:  Дает внешние изогнутые края в качестве границы.
• Гребень:  Дает внутренние изогнутые края в качестве границы (противоположная функциональность канавки).

Пример №1. Контур и смещение со сплошной рамкой.

Синтаксис:

 дел {
контур: 10px сплошной зеленый;
смещение контура: 10 пикселей;
} 

Код:

 

<голова>


<стиль>
.твердый {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6 пикселей сплошного синего цвета;
цвет фона: оранжевый;
контур: 10px сплошной зеленый;
смещение контура: 5px ;
}

<тело>
<дел>
Привет, я офсетная модель с пунктирным контуром.  CSS Сделай меня таким.