CSS | Border Images

The border-image property in CSS is used to specify the border of an image. This property creates border using image instead of normal border. The property contains three part which are listed below:

  • Complete image is used as border.
  • Slice of image is used as border
  • Middle section of image is used (repeated or stretched) as border

The border-image property is used to slice of image into nine sections, like tic-tac-toe board.

Syntax:

element {
    border-image: url(border.png);
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
            .border1 { 
                border: 10px solid transparent;
                padding: 15px;
                border-image-source: url(
                border-image-repeat: round;
                border-image-slice: 30;
                border-image-width: 20px;
            }
            .border2 { 
                border: 10px solid transparent;
                padding: 15px;
                border-image: url(
                30 stretch;
            }
            .border3 {
                border: 10px solid transparent;
                padding: 15px;
                border-image: url(
                20% round;
            }
            div {
                margin-top:20px;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>border-image property</h2>
        <div class = "border1">Border 1</div>
        <div class = "border2">Border 2</div>
        <div class = "border3">Border 3</div>
    </body>
</html>                                    

chevron_right


Output:

border-image properties: There are many border-image property which are listed below:

  • border-image-source: This property is used to set the image path.
  • border-image-width: This property is used to set the width of boarder image.
  • border-image-slice: This property is used to slice the border of the image.
  • border-image-repeat: This property is used to set the border of the image as rounded, repeated and stretched.
  • border-image-outset: This property is used to specify the amount by which the border image area extends beyond the border box.

Supported Browser: The browser supported by border-image property are listed below:

  • Google Chrome 16.0
  • Firefox 15.0
  • Safari 6.0
  • Internet Explorer 11.0
  • Opera 15.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.