border-image
Quick Summary for border-image
The border-image CSS property draws an image around a given element. It replaces the element's regular border.
Code Usage for border-image
/* 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: unset; 
More Details for border-image

border-image

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

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:

border-image-outset border-image-repeat border-image-slice border-image-source border-image-width

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

<'border-image-source'>

The source image. See border-image-source.

<'border-image-slice'>

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

<'border-image-width'>

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

<'border-image-outset'>

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

<'border-image-repeat'>

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.

MDN Understanding WCAG, Guideline 1.1 explanations Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0

Formal definition

Initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretch
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inheritedno
Percentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image area
Computed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its URI made absoluteborder-image-width: as specified, but with relative lengths converted into absolute lengths
Animation typediscrete

Formal syntax

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

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

Specification
CSS Backgrounds and Borders Module Level 4 # the-border-image

See also

border outline box-shadow background-image url() function Gradient functions: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient() Select your preferred language English (US)DeutschEspañolFrançais日本語한국어中文 (简体)正體中文 (繁體) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

minecraft
Random CSS Property

::slotted()

The ::slotted() CSS pseudo-element represents any element that has been placed into a slot inside an HTML template (see Using templates and slots for more information).
::slotted css reference