border-image - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-image

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-image

Description

The border-image CSS property sets how an image is used for border styles.

This is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties at once.

The following table summarizes the border-image Property.

Item Value
Default value: none 100% 1 0 stretch; See individual properties
Applies to:All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
border-image-source Set the location of the image.
border-image-slice Set the inward offsets from the top, right, bottom, and left edges.
border-image-width Set the width of the border.
border-image-outset Set the amount where the border image area extends beyond the border box.
border-image-repeat Set how the middle part of the border image are scaled or tiled to match the size of the border.
initial Sets this property to its default value.
inherit take the value of its parent element border-image property.

The example below shows the border-image property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-image Property</title>
  <style type="text/css">
  .box {<!-- w w  w.j  a v a 2  s. c  o  m-->
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("https://www.java2s.com/style/demo/Opera.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("https://www.java2s.com/style/demo/Opera.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("https://www.java2s.com/style/demo/Opera.png") 30 30 round;
  }
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials