w3resource

HTML CSS Exercise: Create a border image With CSS3

Solution:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - Border image with with CSS3</title>
<style type="text/css">
.border-around{
	text-align:center;
	padding:20px;
	width:340px;
	margin: 0 auto;

	/* Set the border and border image properties */
	border:50px solid transparent;
	border-image:url(https://www.w3resource.com/html-css-exercise/border.png) 50 50 round;
}
</style>
</head>
<body>
<p class="border-around">This is an example of how to use css3 border image</p>
</body>
</html>

Live Demo :

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


Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.