Как сделать обводку картинки в html

Как добавить границу к изображению в CSS

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

Элемент <img> имеет атрибут, который не используется в версиях после HTML5. Поэтому мы рекомендуем использовать CSS свойство border вместо этого.

1. Создайте HTML

В разделе <body> создайте элемент <img> и вставьте ссылку изображения, которое должно использоваться.
Укажите название для изображения с помощью атрибута alt , который дает информацию касательно изображения, если пользователь по каким-то причинам не может просмотреть его.

2. Добавьте CSS

Добавьте style к элементу <img>.
Укажите width изображения.
Укажите ширину, стиль и цвет границы с помощью свойства border.

Пример

Как добавить стиль к изображению границы

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

Пример

Возможно также получить двойную границу с разными цветами внутренней границы. Для этого добавьте свойство background-color.

Пример

Можете также указать границы по отдельности. Для этого используйте CSS свойства border-bottom, border-top, border-left и border-right и для каждого задайте разные значения width. Рассмотрим пример, где свойство border-bottom установлено так, чтобы получился эффект баннера.

Пример

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

Пример

Как задать углы и получить круглые границы

Для того, чтобы указать каждый угол границы, необходимо использовать CSS свойство border-radius. Свойство border-radius может иметь от одного до четырех значений. Рассмотрим пример с четырьмя значениями:

Пример

Вместо того, чтобы пытаться вложить изображение в другой элемент, или редактировать каждое изображение в photoshop для получения желаемого эффекта, вам необходимо установить свойство border-radius в значение 50% или 999em. Задайте одинаковые значения для width и height.

How do I add a border to an image in HTML?

Here is some HTML and CSS code that would solve your issue:

CSS

HTML

You can also add padding for a nice effect.

I also prefer CSS over HTML; HTML is about content, CSS about presentation.

With CSS you have three options.

Inline CSS (like in Trevor’s and Diodeus’ solutions). Hard to maintain, and doesn’t guarantee consistency: you’ll have to check yourself that every image has the same border-width and border-color.
Internal stylesheet. Solves the consistency issue for all images on the page having , but you’ll have to include a stylesheet for each page, and again make sure «hasBorder» is defined the same each time.
External stylesheet. If you include a link to the external CSS file on each page all images with on all pages will have the same border.

Example using internal stylesheet:

If you want an external stylesheet, replace the <style>. </style> block with

border=»1″ ON IMAGE tag or using css border:1px solid #000;

You can learn a great deal about borders, and how to use them at http://www.w3schools.com/css/css_border.asp. That being said, there are a couple different ways you could accomplish this.

Below is how I generally do it, but reading the documentation on w3schools you may come upon your own desired method.

Edit:

I noticed the original question was not «How to add a border to an image,» but instead it was «how to add in a box around an image using html?» The question was re-written by others, so I’m not 100% sure you wanted a border on your image.

If you just wanted a box around your images, you could use a DIV, with it’s own styles:

Как сделать рамку? CSS-свойство border

В этой статье изучим CSS-свойства для стилизации границ элемента: border , border-width , border-style , border-color , border-radius , border-image , border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat .

border — оформление границ элемента

CSS-свойство border предназначено для управления оформлением границ элемента. Границы располагаются перед фоном элемента.

border – это универсальное свойство для стилизации границ (рамки) вокруг элемента. Оно позволяет установить сразу три характеристики: толщину границ ( border-width ), стиль линий ( border-style ) и цвет ( border-color ).

Создание сплошной границы вокруг элемента

border состоит из трёх других свойств (в скобках приведены значения каждого из них, которые они имеют по умолчанию):

border-width (medium);
border-style (none);
border-color (currentcolor).

Свойство border устанавливает стили сразу для всех четырёх границ. В отличие от него border-width , border-style и border-color могут принимать до 4 значений, и тем самым стилизовать каждую из сторон по-отдельности.

Стилизация каждой границы по-отдельности посредством border-width, border-style и border-color

При установке меньшего количества значений:

border-width – толщина границы

CSS-свойство border-width определяет толщину границы. По умолчанию данное свойство имеет значение medium , что эквивалентно 3px.

Задавать значение можно с помощью ключевых слов: thin (эквивалентно 1px), medium (3px) и thick (5px), а также используя различные единицы измерения: px, em, rem, vh, vw.

Задание толщины границы с помощью border-width

border-style – тип линии

CSS-свойство border-style предназначено для установки стилей границам.

solid – сплошная непрерывная линия;
none (по умолчанию) – без отображения границы;
hidden – то же самое, что none , за исключением отображения границ у ячеек таблицы с border-collapse: collapse ;
dashed – штриховая линия;
dotted – линия из точек;
double – двойная линия;
groove – линия со вдавленным эффектом;
ridge – линия с выпуклым эффектом;
inset – добавляет эффект к границе таким образом, чтобы весь блок выглядел вдавленным;
outset – добавляет эффект к границе таким образом, чтобы весь блок выглядел выпуклым;

Отличие между border-style: none и border-style: hidden :

Отличие между border-style: none и border-style: hidden

border-color – цвет линии

CSS-свойство border-color используется для установки цвета границам элемента. По умолчанию оно имеет значение currentcolor , т.е. наследует цвет элемента.

Задать определённый цвет границам можно разными способами, а именно с помощью:

названия цвета, например: red , green и т.д.;
шестнадцатеричного кода, например: #ff0000 , #00ff00 и т.д.;
rgb() , rgba() , hsl() или hsla() ;
transparent (прозрачный);

Если указать одно значение, то оно будет применено сразу к 4 границам (верхней, правой, нижней и левой).

Использование CSS-свойства border-color для установки цвета границам элемента

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

Использование CSS-свойства border-color для установки каждой границы элемента отдельного цвета

Свойства для стилизации границ по-отдельности

В CSS имеются свойства, которые позволяют задать стиль определённой границы (top – верхней, right – правой, bottom – нижней и left – левой): border-top , border-right , border-bottom и border-left .

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

для толщины: border-top-width , border-right-width , border-bottom-width и border-left-width ;
для типа линии: border-top-style , border-right-style , border-bottom-style и border-left-style ;
для цвета: border-top-color , border-right-color , border-bottom-color и border-left-color .

border-radius – закругление углов

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

Скругление углов с помощью CSS-свойства border-radius

border-radius работает даже если у элемента нет границ, т.к. его действие распространяется и на фон.

Скругление углов у элемента, у которого нет границ

В основном border-radius используется с одним значением.

Когда вы используете только одно значение, все углы элемента скругляются на это значение.

Кроме указания значений, с помощью единиц измерения для задания фиксированной длины (например: px, rem, em и т.д.), вы также можете использовать проценты.

В основном это используется для создания круга путем установки border-radius , равным 50%.

Скругление углов у элемента, у которого нет границ

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

Читать:

Как сделать счет в ут 11

Пример, показывающий разницу между border-radius: 40px и border-radius: 40% применительно к прямоугольнику:

Скругление углов у элемента, у которого нет границ

border-radius позволяет установить радиус скругления отдельно для каждого угла. Для этого необходимо перечислить значения через пробел (начиная с верхнего левого угла и далее двигаясь по часовой стрелке):

Кроме этого, скруглить отдельно каждый угол можно с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

С двумя значениями:

С тремя значениями:

Кроме этого, border-radius позволяет создавать ассиметрично скруглённые углы. Осуществляется это с помощью косой черты.

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

border-image – изображение в качестве рамки

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

border-image можно применить к любому элементу, за исключением тегов, определяющих содержимое таблицы ( tr , th , td ) когда в качестве значения border-collapse установлено collapse .

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

border-image является краткой записью следующих пяти свойств:

border-image-source (none);
border-image-slice (100%);
border-image-width (1);
border-image-outset (0);
border-image-repeat (stretch).

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

Пример создания градиентной границы с помощью border-image :

Использование border-image для создания градиентной границы

border-image-source

border-image-source – задаёт изображение (посредством URL-адреса, URI-данных или встроенного SVG) или CSS градиент, который необходимо использовать для отрисовки границы. Значение по умолчанию: none .

border-image-slice

border-image-slice – сообщает браузеру, как необходимо «разрезать» изображение и тем самым определить области для отрисовки границ.

В процессе нарезки изображения образуется 9 областей: четыре угла, четыре стороны и центр.

Области 1 – 4 используется всего один раз для отрисовки соответствующих углов границ элемента;
Области 5 – 8 применяются для отрисовки соответствующих сторон границ, расположенных между углами. В зависимости от значения свойства border-image-repeat область исходного изображения может растягиваться, повторяться, масштабироваться или иным образом изменяться, чтобы соответствовать размерам элемента;
Область 9 является центральной и по умолчанию отбрасывается.

Для использования области 9 в качестве фонового изображения элемента, необходимо добавить в любое место значения border-image-slice ключевое слово fill . При этом это фоновое изображение будет располагаться поверх фактического background .

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

В border-image-slice можно установить от одного до четырёх значений:

при указании одного значения, все четыре среза создаются на одинаковом расстоянии от соответствующих сторон;
если два значения, то первая величина определяет срезы сверху и снизу, а вторая — слева и справа;
когда указаны три значения, первое создает срез сверху, второе – слева и справа, а третье – снизу;
при задании четырех значений, они определяют срезы соответственно сверху, справа, снизу и слева (т.е. по часовой стрелке).

При указании одного значения:

Использование border-image-slice для того, чтобы определить как необходимо разрезать изображение и тем самым определить области для отрисовки границ

При указании двух значений:

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

Свойства border-image-repeat , border-image-width и border-image-outset позволяют задать каким образом эти области должны использоваться для формирования окончательной отрисовки границы.

border-image-width

Свойство border-image-width устанавливает толщину границы для изображения. По умолчанию имеет значение 1 (это означает, что она равна border-width ).

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

В border-image-width можно задать от одного до четырех значений:

при указании одного значения, все четыре границы будут иметь одну эту толщину;
при задании двух значений, первая величина будет определять толщину верхней и нижней границы, а вторая – левой и правой;
когда указаны три значения: первая величина будет задавать толщину верхней границы, вторая – левой и правой, а третья – нижней;
при задании четырёх значений: первая величина – за толщину верхней границы, вторая – правой, третья – нижней и четвёртая – левой (т.е. по часовой стрелке, начиная с верхней).

Задавать значение можно с помощью:

числа – в этом случае, толщина границы будет вычисляться как значение border-width умноженное на это число;
px и других единиц – в соответствии с указанными единицами;
процентов (%) – толщина границы будет вычисляться в процентах относительно размера блока;
ключевого слова auto – толщина границы берётся из border-image-slice (если подходящего размера нет, то используется то, что задано в border-width ).

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

Использование border-image-width для установки толщины границы для изображения

border-image-outset

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

В border-image-outset можно задать от одного до четырёх значений:

при задании одного значения, оно применяется ко всем четырем сторонам;
если указаны два значения, то первое применяется к верхней и нижней границам, а второе — к левой и правой;
указании трёх значений, первое применяется к верхней границе, второе — к левой и правой, а третье — к нижней;
указаны четыре значения, они применяются к верхней, правой, нижней и левой границам в указанном порядке (по часовой стрелке).

Задавать значения можно с помощью:

px, em, rem и других CSS единиц — в этом случае смещение будет определяться в соответствии с этим значением;
числа – в этом случае расстояние будет равно этому число умноженное на значение border-width .

Пример, в котором сместим границы на величину, равную 1 * border-width :

Смещение границ элемента на величину, равную 1 * border-width

border-image-repeat

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

border-image-repeat может быть установлено с использованием одного или двух значений.

Когда указано одно значение, то оно применяет одно и то же поведение ко всем четырем сторонам. При задании двух значений, первое применяется к верхней и нижней сторонам, а второе — к левому и правому.

Как сделать обводку картинки в html

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Border-Style

Outline

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