Scribd
Upload
256 views

CSS3 - Border Image

The CSS3 border image property allows images to be used as borders. It can slice, repeat, and resize the image to form the border. The border image source, slice, repeat, and width values are used to configure the image border, such as setting the image file path, slicing the image, repeating it round the element, and setting the border width. The example demonstrates applying different sized image borders to paragraphs using these CSS3 border image property values.

Uploaded by

survivalofthepoly
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
256 views

CSS3 - Border Image

The CSS3 border image property allows images to be used as borders. It can slice, repeat, and resize the image to form the border. The border image source, slice, repeat, and width values are used to configure the image border, such as setting the image file path, slicing the image, repeating it round the element, and setting the border width. The example demonstrates applying different sized image borders to paragraphs using these CSS3 border image property values.

Uploaded by

survivalofthepoly
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS3 - Border Image

CSS Border image property is used to add image boarder to some elements.you don't need to use
any HTML code to call boarder image.A sample syntax of boarder image is as follows −

#borderimg {
border: 10px solid transparent;
padding: 15px;
}

The most commonly used values are shown below −

Sr.No. Value & Description

border-image-source
1
Used to set the image path
border-image-slice
2
Used to slice the boarder image
border-image-width
3
Used to set the boarder image width
border-image-repeat
4
Used to set the boarder image as rounded, repeated and stretched

Example

Following is the example which demonstrates to set image as a border for elements.

Live Demo

<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>

<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>

It will produce the following result −

You might also like