border-image-source - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-image-source

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

Description

The border-image-source CSS property includes the image for the border.

The following table summarizes the border-image-source Property.

Item Value
Default value: none
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:     none | image | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
noneNo border-image, the border-style will be used. This is default value.
image Set the border image location.
initial Sets this property to its default value.
inherit take the value of its parent element border-image-source property.

The example below shows the border-image-source property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-image-source Property</title>
  <style type="text/css">
  .box {<!--from  w w w . j a  va  2s .c om-->
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    border-image-source: url("https://www.java2s.com/style/demo/Opera.png");
    border-image-slice: 30;
    border-image-repeat: round;
  }
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials