Project: CA Arunkumar and Co.(Website for CA Firm)

on

Write an html and CSS program to create a Border using an Image

on

 Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Border Image</title>

<style>

#bordering1{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 50 round;

}

#bordering2{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 20% round;

}

#bordering3{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30% round;

}

#bordering4{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 20% stretch;

}

#bordering5{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30% stretch;

}

#bordering6{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 40% stretch;

}

#bordering7{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 20% repeat;

}

#bordering8{

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30% repeat;

}

</style>

</head>

<body>

<p id="bordering1">50 round</p>

<p id="bordering2">20% round</p>

<p id="bordering3">30% round</p>

<p id="bordering4">20% stretch</p>

<p id="bordering5">30% stretch</p>

<p id="bordering6">40% stretch</p>

<p id="bordering7">20% repeat</p>

<p id="bordering8">30% repeat</p>

</body>

</html>

Output: