HTML Code:
<!doctype html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<title>HTML CSS Exercise - Border image with with CSS3</title><!-- Title of the HTML document -->
<style type="text/css"><!-- Opening style tag for CSS with type attribute -->
.border-around{ /* Style for elements with class border-around */
text-align:center; /* Align text to the center */
padding:20px; /* Padding around the element */
width:340px; /* Width of the element */
margin: 0 auto; /* Centering the element horizontally */
/* Set the border and border image properties */
border:50px solid transparent; /* Border with 50px width and transparent color */
border-image:url(https://www.w3resource.com/html-css-exercise/border.png) 50 50 round; /* Border image from URL with specified width, outset, and repeat style */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<p class="border-around">This is an example of how to use css3 border image</p><!-- Paragraph element with border-around class -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->
Explanation:
Live Demo :
See the Pen border-image-with-css3-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4