Css img border right

border — image

Надоели скучные одноцветные рамки? Используйте картинку!

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Это свойство позволяет использовать картинку в качестве «заливки» рамки.

Пример

Скопировать ссылку «Пример» Скопировано

   Выход
за
рамки  div class="element"> span>Выходbr>заbr>рамкиspan> div>    Скопировать Скопировано Не удалось скопировать   

 .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch;> .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В примере выше специально сделана разорванная рамка. Становится хорошо видно, как браузер поступает с изначальной картинкой рамки. Он делит её на девять частей:

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

После двоеточия значения указываются в следующем порядке:

 .selector  border-image: источник фрагмент ИЛИ процент [/ ширина ] повторение;> .selector  border-image: источник фрагмент ИЛИ процент1,4> [/ ширина 1,4>] повторение0,2>; >    Скопировать Скопировано Не удалось скопировать   

Числа в фигурных скобках ( , ) подсказывают, сколько раз может повторяться это значение.

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

Источник

Скопировать ссылку «Источник» Скопировано

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

 .selector  border-image: url(border.png);> .selector  border-image: url(border.png); >    Скопировать Скопировано Не удалось скопировать   

Картинка может быть в любом формате. В том числе в SVG.

Можно использовать отдельное свойство border — image — source .

Фрагмент

Скопировать ссылку «Фрагмент» Скопировано

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

 .selector  border-image: url(border.png) 10;> .selector  border-image: url(border.png) 10; >    Скопировать Скопировано Не удалось скопировать   

Значение может быть указано в процентах:

 .selector  border-image: url(border.png) 50%;> .selector  border-image: url(border.png) 50%; >    Скопировать Скопировано Не удалось скопировать   

Значение по умолчанию — 100 % .

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

Можно использовать отдельное свойство border — image — slice .

Ширина

Скопировать ссылку «Ширина» Скопировано

Необязательное значение. Но обратите внимание на два момента:

1. Для отображения рамки её ширина должна быть указана либо в свойстве border , либо в свойстве border — image . Если ширина рамки нигде не указана, то рамка не отображается.
2. Если указываете ширину в свойстве border — image , то её значение отделяется от предыдущих слэшем / .

 .selector  border-image: url(border.png) 50% / 10px;> .selector  border-image: url(border.png) 50% / 10px; >    Скопировать Скопировано Не удалось скопировать   

При указании ширины нужно указать единицы измерения.

Можно задать от одного до четырёх значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border — image — width .

Повторение

Скопировать ссылку «Повторение» Скопировано

Описывает при помощи ключевых слов, как именно браузер должен поступить с фрагментами при создании рамки.

Ключевые слова, которые можно задать:

• stretch — значение по умолчанию. Фрагмент рамки растягивается так, чтобы заполнить промежуток между углами.
• repeat — фрагменты повторяются до тех пор, пока области между углами не будут заполнены. Фрагмент может быть обрезан.
• round — браузер повторяет фрагменты для заполнения пространства между углами, но не обрезает их. При этом, если целое число фрагментов не закрывает всю площадь, то они равномерно распределяются, так что возможно появление промежутков между фрагментами.
• space — фрагменты повторяются, а свободное место, оставшееся после повторения целого количества фрагментов, распределяется равномерно.

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

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

 .selector  border-image: url(border.png) 50% / 10px round stretch;> .selector  border-image: url(border.png) 50% / 10px round stretch; >    Скопировать Скопировано Не удалось скопировать   

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

Центральная часть по умолчанию пустая. Чтобы заполнить её фрагментами, можно задать ключевое слово fill после значения размера фрагмента. Но для этого трюка нужно, чтобы картинка рамки включала в себя центральную часть 🔮

Фрагментами будет заполнена и центральная часть:

 .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch;> .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch; >    Скопировать Скопировано Не удалось скопировать   

Можно использовать отдельное свойство border — image — repeat .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Обязательно задаётся ширина рамки. Либо в этом свойстве, либо при помощи шортката border , либо при помощи отдельного свойства border — width .

💡 Рамка — стильная штука. Без значения для свойства стиля рамка не покажется. Соответственно, нужно либо указать значение в шорткате border , либо при помощи отдельного свойства border — style .

💡 Можно сбросить картинку рамки при помощи ключевого слова none в качестве значения.

💡 Помимо картинки, в качестве рамки можно задать градиент.

Для этого вместо url ( ) пишется linear — gradient ( ) либо radial — gradient ( ) . Остальные значения указываются так же, как если бы была указана картинка.

• Chrome 56, Поддерживается 56
• Edge 12, Поддерживается 12
• Firefox 50, Поддерживается 50
• Safari 9.1, Поддерживается 9.1

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Это свойство редко встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба.

Раньше не существовало свойства border — radius , и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯

Короче, нам повезло, сейчас попроще.

Источник

border-right

The border-right shorthand CSS property sets all the properties of an element’s right border.

Try it

As with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

border-right-style: dotted; border-right: thick green; 

It is actually the same as this one:

border-right-style: dotted; border-right: none thick green; 

The value of border-right-style given before border-right is ignored. Since the default value of border-right-style is none , not specifying the border-style part results in no border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; /* Global values */ border-right: inherit; border-right: initial; border-right: revert; border-right: revert-layer; border-right: unset; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-right-width : medium
• border-right-style : none
• border-right-color : currentcolor

• border-right-width : the absolute length or 0 if border-right-style is none or hidden
• border-right-style : as specified
• border-right-color : computed color

• border-right-color : a color
• border-right-style : discrete
• border-right-width : a length

Formal syntax

border-right =
||
||

=
|
thin |
medium |
thick

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Applying a right border

HTML

div>This box has a border on the right side.div> 

CSS

div  border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Image Borders

This page contains copy/paste HTML image border codes. These are codes that create borders around your HTML images. You can take these codes and modify them for your own use.

You create HTML image borders by using Cascading Style Sheets (CSS). Specifically, you use the CSS border property. You can also use other CSS properties to create HTML borders (such as border-width , border-style and border-color ), but these don’t do anything that border doesn’t do. That’s because border is shorthand for those other properties.

When you use the border property, you need to supply three parameters; Width, Style, and Color. The code looks something like this: border:1px solid black

Below are examples of HTML image borders. The code is provided and you can copy/paste and modify as you wish.

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Variations of Image Borders

You can create different variations of your HTML image borders if you like. For example, you could have a different style of border on each side of your image. Or you could have a different width or color on different sides. You could also choose to only have a border on one side. Be creative!

CSS provides four properties for defining border properties for each side of your image. These are border-top , border-right , border-bottom , and border-left .

Below are some examples of these types of variations.

Source Code	Result

Source Code	Result

You can also combine the border property with the other properties. For example, you can set the border properties of all sides using border property, then override one or more sides using the other, more specific properties.

Source Code	Result

Background Images

Another way to add an image to a web page is to add the image as a background image.

Linked Images

You can also have linked images on your web page. These are images that, when clicked on, open another web page or URL. To create a linked image, see our HTML Links page.

Источник

border-right

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

Синтаксис

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style . Их названия и результат действия представлен на рис. 1.

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

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Применение border-right

Объектная модель

[window.]document.getElementById(» elementID «).style.borderRight

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Источник