Tutorialspoint.dev

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:

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter