Html image border size and color

border-image

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

Try it

Note: You should specify a separate border-style in case the border image fails to load. Although the specification doesn’t strictly require it, some browsers don’t render the border image if border-style is none or border-width is 0 .

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; /* Global values */ border-image: inherit; border-image: initial; border-image: revert; border-image: revert-layer; border-image: unset; 

The border-image property may be specified with anywhere from one to five of the values listed below.

Note: If the computed value of border-image-source is none , or if the image cannot be displayed, the border-style will be displayed instead.

Values

The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice .

The width of the border image. Up to four values may be specified. See border-image-width .

The distance of the border image from the element’s outside edge. Up to four values may be specified. See border-image-outset .

Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See border-image-repeat .

Accessibility concerns

Assistive technology cannot parse border images. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

Formal definition

• border-image-source : none
• border-image-slice : 100%
• border-image-width : 1
• border-image-outset : 0
• border-image-repeat : stretch

• border-image-slice : refer to the size of the border image
• border-image-width : refer to the width or height of the border image area

• border-image-outset : as specified, but with relative lengths converted into absolute lengths
• border-image-repeat : as specified
• border-image-slice : one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
• border-image-source : none or the image with its URI made absolute
• border-image-width : as specified, but with relative lengths converted into absolute lengths

• border-image-outset : by computed value type
• border-image-repeat : discrete
• border-image-slice : by computed value type
• border-image-source : discrete
• border-image-width : by computed value type

Formal syntax

Examples

Bitmap

In this example, we will apply a diamond pattern to an element’s borders. The source for the border image is a «.png» file of 81 by 81 pixels, with three diamonds going vertically and horizontally:

HTML

div id="bitmap"> This element is surrounded by a bitmap-based border image! div> 

CSS

To match the size of a single diamond, we will use a value of 81 divided by 3, or 27 , for slicing the image into corner and edge regions. To center the border image on the edge of the element’s background, we will make the outset values equal to half of the width values. Finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps.

#bitmap  width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("border.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ > 

Result

Gradient

HTML

div id="gradient"> This element is surrounded by a gradient-based border image! div> 

CSS

#gradient  width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; > 

Result

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 Apr 28, 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.

Источник

How to Add Border to Image in CSS

Images with borders or frames make the image look more influential and differ from the other content on the page. In this snippet, we will show how to add a border to the image.

Create HTML

img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

Add CSS

• Add style to your element.
• Define the width of the image.
• Define the width, style, and color of the border with the help of the border property.

img < width: 270px; border: 1px solid black; >

Example of adding a border to the image:

html> html> head> title>Title of the document title> style> img < width: 270px; border: 1px solid black; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Result

How to Add Styling to the Border Image

To change the border color, you can add the CSS color property. If you want to create a double border, you need to add the padding property to the style of your image.

Example of adding a double border to the image:

html> html> head> title>Title of the document title> style> img < width: 650px; padding: 1px; border: 1px solid #021a40; > style> head> body> h2>Double Border Example h2> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

It is also possible to have a double border with different inside border color. For that purpose, add the background-color property.

Example of styling the double border of the image:

html> html> head> title>Title of the document title> style> img < width: 650px; padding: 5px; border: 8px solid #999999; background-color: #e6e6e6; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

In our next example, we add a border to the image and use a colored background. If you want to increase the width of the frame, add more padding.

Example of framing an image with a colored background:

html> html> head> title>Title of the document title> style> .nature < background: #b0afac; padding: 12px; border: 1px solid #999; > style> head> body> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" height="256" alt="Nature" class="nature"> body> html>

It is also possible to frame an image with a caption.

Example of adding a caption:

html> html> head> title>Title of the document title> style> .img-frame-cap < width: 200px; background: #fff; padding: 18px 18px 2px 18px; border: 1px solid #999; > .caption < text-align: center; margin-top: 4px; font-size: 12px; > style> head> body> div class="img-frame-cap"> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" width="200" height="256" alt="Nature"> div class="caption">Nature div> div> body> html>

You can also specify borders separately. For that purpose, use CSS border-bottom, border-top, border-left, and border-right properties and set different width values for each. Let’s see an example in which the border-bottom property is set to have an effect like a banner.

Example of specifying borders separately:

html> html> head> title>Title of the document title> style> img < width: 225px; border: 8px solid #ccc; border-bottom: 130px solid #ccc; > style> head> body> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature"> body> html>

To add styling to your image border, add the border-style property to the element.

Example of styling the border image with the border-style property:

html> html> head> title>Title of the document title> style> img < width: 650px; padding: 5px; border: 12px #1c87c9; border-style: dashed; background-color: #eee; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

How to Specify Each Corner and Create Circle Borders

To specify each corner of the border, you need to use the CSS border-radius property. The border-radius property can have one to four values. Let’s see an example with four values.

Remember that the first value applies to the top-left corner, the second value applies to the top-right edge, the third value refers to the bottom-right corner, and the fourth value applies to the bottom-left corner.

Example of specifying each corner of the image border:

html> html> head> title>Title of the document title> style> img < width: 650px; padding: 2px; border: 3px solid #1c87c9; border-radius: 15px 50px 800px 5px; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Instead of trying to nest the image inside another element, or editing every image in photoshop to achieve a proper look for your image border, you need to set the value of the border-radius property to «50%» or «999em». Set the same width and height values.

Example of adding a circle border to the image:

html> html> head> title>Title of the document title> style> div.imageborder < border-radius: 999em; width: 350px; height: 350px; padding: 5px; line-height: 0; border: 10px solid #000; background-color: #eee; > img < border-radius: 999em; height: 100%; width: 100%; margin: 0; > style> head> body> h2>Circle Border Example h2> div class="imageborder"> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland"/> div> body> html>

How to Add a Drop Shadow Under the Image Border

To add a drop shadow, we need to use the box-shadow property. Also, set the display property to «block».

Example of adding a drop shadow:

html> html> head> title>Title of the document title> style> .nature < display: block; background: transparent; padding: 8px; border: 1px solid #ccc; box-shadow: 10px 10px 10px #999; > style> head> body> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature" class="nature"> body> html>

Two different border styles:

Let’s get into another cool example. Here we’ll make two different border styles for our image. To this, we’ll use the box-shadow, border, and outline properties.

html> html lang="en"> head> title>Document title> head> style> .container < padding: 20px; > #nature-image < border: 5px solid violet; /* inner border */ outline: 3px dotted tomato; /* outer border */ outline-offset: 10px; /* gives some space between two borders */ > style> body> div class="container"> img src="https://i.ibb.co/fMTGnRz/pexels-photo-572897.jpg" alt="snow-nature" height="300px" width="300px" id="nature-image" /> div> body> html>

Here’s the result:

It’s pretty self-explanatory. We used an image tag id and selected it in our CSS. Then we used the border for the inner border and an outline for the outer border around our image. And finally, by using outline-offset , we make room between two borders.

Another way of having two borders around an image is by using the box-shadow property. It’s pretty straightforward, and just one line of code and, in some cases, is so helpful.

html> html lang="en"> head> title>Document title> head> style> .container < padding: 20px; > #nature-image < box-shadow: 0 0 0 5px violet, 0 0 0 10px tomato; /* add this line, values are inset | offset-x | offset-y | color , we just use the color */ > style> body> div class="container"> img src="https://i.ibb.co/fMTGnRz/pexels-photo-572897.jpg" alt="snow-nature" height="300px" width="300px" id="nature-image" /> div> body> html>

The tip is that the second colour size should be doubled if you want two equal-sized borders. For example, we have the violet-coloured border set to 5px, and then we set the tomato-coloured one to 10 px.

Hope you’ve enjoyed the examples.

Источник