CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Border Image

CSS provide several properties that allows you to specify an image to act as an element's border.

CSS Border Images

This box has an image as its border

We have the following properties to set an image as an element's border:

Note: For border image to work, the element also needs the border property set.


border-image-source

The border-image-source property specifies the location of the image to be used for the border.

Run code

border-image-slice

The border-image-slice property divides the image specified by border-image-source in nine regions: four corners, four edges, and a middle. It does this by specifying 4 inwards offsets that typically creates a three by three grid.

Run code

Different slice values completely changes the look of the border:

border-image-slice: 60;

border-image-slice: 45%;

border-image-slice: 15%;



border-image-width

The border-image-width property specifies the width of an element's border-image.

Run code

border-image-repeat

The border-image-repeat property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.

Run code

border-image-outset

The border-image-outset property specifies the amount by which the border image area extends beyond the border box.

Run code

border-image

The border-image property is a shorthand that sets all border image properties in a single declaration.

Run code

CSS Border Image properties

Property Description
border-image A shorthand property for setting all the border image properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched