Css border внутренние границы: border-radius — CSS | MDN

Leave a Comment / Css / By /

border — граница блока | CSS справочник

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

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.

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

е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства border-width. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

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

Значение по умолчанию: не определено
Применяется: ко всем элементам
Анимируется: да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object. style.border=»3px solid blue»

Синтаксис

border: border-width border-style border-color|inherit;

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

Значение Описание
border-width Указывает ширину для рамки с помощью любой допустимой единицы измерения CSS (кроме процентов).
border-style Указывает стиль для рамки, который определяется одним из ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden и none. Значения hidden и none
являются взаимозаменяемыми, они указывают, что рамка отсутствует.
border-color Задает цвет для рамки одним из следующих способов: имя цвета, шестнадцатеричное значение или RGB, выбрать подходящий цвет или значение можно с помощью таблицы цветов.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    p { border: 5px solid red; }
  </style>
</head>

<body>
  <p>Здесь содержится какой-то текст.</p>
</body>
</html>

Результат данного примера в окне браузера:

CSS3 | Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width: устанавливает ширину границы

  • border-style: задает стиль линии границы

  • border-color: устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

  • Значения в единицах измерения, таких как em, px или cm

    
border-width: 2px;

  • Одно из константных значений: thin (тонкая граница — 1px), medium (средняя по ширине — 3px), thick (толстая — 5px)

    
border-width: medium;

Свойство border-color в качестве значения принимает цвет CSS:


border-color: red;

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

  • none: граница отсутствует

  • solid: граница в виде обычной линии

  • dashed: штриховая линия

  • dotted: линия в виде последовательности точек

  • double: граница в виде двух параллельных линий

  • groove: граница имеет трехмерный эффект

  • inset: граница как бы вдавливается во внутрь

  • outset: аналогично inset, только граница как бы выступает наружу

  • ridge: граница также реализует трехмерный эффект

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

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


/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

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


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

Например:


border: 2px solid red;

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


border-top
border-bottom
border-left
border-right

Их использование аналогично:


border-top: 2px solid red;

Радиус границы

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:


border-radius: 15px 30px 5px 40px;

Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:


border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов.

То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:


border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

НазадСодержаниеВперед

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

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

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

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

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

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

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

Синтаксис: 

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

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

Синтаксис: 

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

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

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

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

Синтаксис: 

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

Код: 

 

<голова>
SolidOutline

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

 

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

Вывод:

Пример 2. Контур и смещение пунктирной границы

Синтаксис: 

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

Код: 

 

<голова>
Точечный контур

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

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

Вывод:

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

Синтаксис: 

 div{
контур: 10 пикселей, пунктирный синий;
смещение контура: 12px;
}

Код: 

 

<голова>
Штриховой контур

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

<тело>

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

Вывод:

Пример 4. Контур и смещение с двойной рамкой

Синтаксис: 

 div{
контур: 10px двойной коричневый;
смещение контура: 13px;
}

Код: 

 

<голова>
Двойной контур

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

<тело>

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

Вывод:

Пример № 5. Контур и смещение с помощью Groove Border

Синтаксис: 

 div{
контур: 10 пикселей, канавка желтая;
смещение контура: 14px;
}

Код: 

 

<голова>
Контур канавки

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

<тело>

Привет, я модель Groove для офсетной печати. CSS Сделай меня таким.

Вывод:

Пример № 6. Контур и смещение с границей хребта

Синтаксис: 

 div{
контур: серебряный ребро 10 пикселей;
смещение контура: 10 пикселей;
}

Код: 

 

<голова>
Контур хребта

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

<тело>

Привет, я офсетная модель Ridge.  CSS Сделай меня таким.

Вывод:

Заключение

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

Заключение Аналогия:

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

Рекомендуемые статьи

Это руководство по внутренней границе CSS. Здесь мы обсуждаем введение, принцип работы и различные примеры внутренней границы. Вы также можете ознакомиться со следующими статьями, чтобы узнать больше:

  1. Типы селекторов CSS
  2. Значок меню CSS
  3. Заполнение границы CSS
  4. Мигающий текст CSS

Внутренняя рамка над изображениями с помощью CSS?

спросил

Изменено 2 года назад

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

Я хотел бы добавить белую рамку ко всем моим изображениям в моем блоке контента с помощью css. Изображения в областях div верхнего и нижнего колонтитула не должны быть затронуты. как мне этого добиться? См. пример изображения ниже. На веб-страницах есть изображения разного размера.

См. рисунок:

  • css
  • изображение
  • граница

5

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

http://cssdeck.com/labs/t6nd0h9p

 img {
  контур: 1px сплошной белый;
  смещение контура: -4px;
}

IE9 и 10 не поддерживают свойство layout-offset, но в остальном поддержка хорошая: http://caniuse.com/#search=outline

Альтернативное решение, не требующее знания размеров изображения:

http://cssdeck.com/labs/aajakwnl

 

div.ie-контейнер {
  отображение: встроенный блок;
  положение: родственник;
}
div.ie-контейнер: до {
  дисплей: блок;
  содержание: '';
  положение: абсолютное;
  верх: 4px;
  справа: 4 пикселя;
  внизу: 4px;
  слева: 4px;
  граница: 1px сплошной белый;
}
картинка {
  вертикальное выравнивание: посередине; /* необязательный */
}

3

Вы можете попробовать это:

HTML:

 

  <дел>

CSS:

 . изображение
{
    ширина: 325 пикселей;
    высота: 239 пикселей;
    background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7Xh5Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 без повтора;
    размер фона: обложка;
    отступ: 10 пикселей;
}
.innerdiv
{
  граница: 1px сплошной белый;
  высота:100%;
  ширина: 100%;
}

jsFiddle

Надеюсь, это то, что вы имели в виду 🙂

2

Я решил это с помощью box-shadow: вставка , и это работает с IE11 и выше. Я хотел рамку в углах вокруг изображения, но в этом примере есть вставка границы 10px . Для этого требуется родительский элемент div с элементом :before или :after , но он справляется с этим очень хорошо.

 .изображение {
    ширина: 100%;
    высота: авто;
}
.image__wrapper {
    положение: родственник;
}
.image__wrapper: перед {
  содержание: '';
  положение: абсолютное;
  верх: 10 пикселей;
  внизу: 10 пикселей;
  слева: 10 пикселей;
  справа: 10 пикселей;
  box-shadow: вставка 0 0 0 3px красный;
}

CodePen Demo

Каким бы ни был идентификатор или класс div, вы можете просто добавить

 #yourDivIDExample {
.