HTML CSS Exercise: Create a border image With CSS3

Last update on March 04 2024 06:51:39 (UTC/GMT +8 hours)

Solution:

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:

The HTML structure consists of a paragraph element with a class of border-around.
CSS is used to style the paragraph element and create a border image effect.
.border-around class sets the text alignment, padding, width, and centers the element horizontally.
The border property sets a transparent border around the element with a width of 50px.
The border-image property specifies the URL of the image to be used as the border, along with the width of the image slices, the outset for slicing, and the repeat style (in this case, 'round' to repeat the border image to fit the border).

Live Demo :

See the Pen border-image-with-css3-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes