CSS Properties: How to set the border image outside the border edges of an element?
Solution:
HTML Code:
<html>
<head>
<title>How to set the border image outside the border edges of an element</title><!-- Title of the HTML document -->
<style type="text/css">/* CSS style start*/
div {
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for <div> elements */
padding: 15px; /* Sets 15px padding for <div> elements */
border-image-slice: 30; /* Sets the size of the border image slices to 30 */
border-image-repeat: round; /* Specifies that the border image should be repeated to cover the entire border with rounded edges */
border-image-outset: 2px; /* Specifies the outset of the border image to be 2px outside the border edges */
border-image-source: url(https://www.w3resource.com/w3r_images/border.png); /* Specifies the source of the border image */
}
</style>
</head>
<body>
<div>Here, the middle sections of the image are repeated to create the border.</div><!-- <div> element demonstrating the repeated middle sections of the border image -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to set the border image outside the border edges of an element.
- The border property sets a transparent solid border with a width of 15 pixels for >div> elements.
- The padding property sets 15 pixels of padding for >div> elements.
- border-image-slice: 30; specifies the size of the border image slices to be 30 pixels.
- border-image-repeat: round; indicates that the border image should be repeated to cover the entire border with rounded edges.
- border-image-outset: 2px; specifies the outset of the border image to be 2 pixels outside the border edges.
- border-image-source: url(https://www.w3resource.com/w3r_images/border.png); specifies the source of the border image.
Live Demo:
See the Pen border-image-outset-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics