border-image-repeat - HTML CSS CSS Property

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

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

Description

The border-image-repeat CSS property sets how the middle part of the border image are scaled or tiled to fit the size of the border.

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

Item Value
Default value: stretch
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-repeat:      [ stretch | repeat | round | space ] 1 or 2 values | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
stretch stretched to fill the area between the edges of the border. This is default value.
repeat tiled, or repeated to cover the area between the edges of the border.
round tiled, or repeated to fill the area between the edges of the border.
space tiled, or repeated to fill the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the extra space is distributed around the tiles.
initial Sets this property to its default value.
inherit take the value of its parent element border-image-repeat property.

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-image-repeat Property</title>
  <style type="text/css">
  .box {<!--   w  w w .  j a  va2s. c o  m-->
    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