Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the CSS border-image property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The border-image property specifies an image as a border of an element.

It is a shorthand property of the following:

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

Syntax

border-image: source slice width outset repeat|initial|inherit;

Property values

  • border-image-source: It is used to specify the path to the image we have to use as a border.

  • border-image-slice: It is used to specify the dimensions for slicing the source image.

  • border-image-width: It is used to specify the width of the source image.

  • border-image-outset: It is used to specify the distance of the image from the element’s outer edge.

  • border-image-repeat: It is used to specify whether the images should be rounded, repeated, or stretched.

  • initial: It is used to set the property to the default value.

  • inherit: It is used to inherit the property from the parent element.

Code

RELATED TAGS

css
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring