HTML CSS examples for CSS Property:border-image-slice
The border-image-slice CSS property divides border-image-source in nine regions: four corners, four edges, and a middle.
The middle part of the border image is not used by the border itself but is used as a background-image if the 'fill' keyword is present.
The following table summarizes the border-image-slice Property.
Item | Value |
---|---|
Default value: | 100% |
Applies to: | All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
Inherited: | No |
Animatable: | No. |
The syntax of the property is as follows:
border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit
The following table describes the values of this property.
Value | Description |
---|---|
number | distance in pixels of the image for raster images, or vector coordinates for vector images. |
percentage | Relative to the size of the image: the width of the image for horizontal offsets, the height of the image for vertical offsets. |
fill | preserves the middle portion of the image. Otherwise, the middle is not used. |
initial | Sets this property to its default value. |
inherit | take the value of its parent element border-image-slice property. |
The example below shows the border-image-slice property.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS3 border-image-slice Property</title> <style type="text/css"> .box {<!-- ww w . j a v a2 s.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>