CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 box-shadow

CSS3 text-shadow

CSS3 word-wrap

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 Nested Menu

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS Question-Answer

Page Stats

Visitor: 381

CSS3 border-image tag

CSS3 Border image property is used to apply image on the border of the Html element instead of the normal border. Image on Border can be apply using css3 border-image property.

The property has three parts:
1. The image to use as the border.
2. Where to slice the image.
3. Define whether the image should be repeated or stretched.

Property Description
border-image Use to specify an image in a border
border-image: url(img.png) 30 round;
border-image-source specifies the path to the image to be used as a border
border-image-source: url(border.png);
border-image-slice specifies how to slice the image
The border-image-slice property can take from one to four values.
border-image-slice: 30;
border-image-slice: 30 fill;
border-image-width The border-image-width property specifies the width of the border image.
border-image-width: 10px;
border-image-outset specifies the amount by which the border image area extends.
The border-image-outset property can take from one to four values.
border-image-outset: 10px;
border-image-repeat Whether the border image should be repeat, round or stretch. Default is stretch
border-image-repeat: repeat;

Example 1: Border-Image
Image use as a Border:
border image

Output:

Example 2: Border-Image
Image use as a Border:
border image

Output:

Example 3: Border-Image
Image use as a Border:
border image

Output:

Exercise 1:
Image use as a Border:

border image

Exercise 2:
Image use as a Border:

border image