Hi dear welcome to Ascode Blog . In this post we are going to learn how to add image border using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css image border</title>
</head>
<body>
<div class="container">
<div class="title">Ascode - Learn Coding!</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, pariatur laboriosam, laborum voluptate cupiditate nam quidem tenetur sequi dolore eaque quo maxime dolorem et porro tempore fugit dicta quos ab molestias id? Rerum, corporis minima beatae, similique aspernatur provident, explicabo nihil exercitationem excepturi recusandae blanditiis quam modi ex hic dolores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quibusdam esse alias iste saepe mollitia laudantium quasi reprehenderit ad et similique odit fugiat tenetur accusamus, accusantium dolorem obcaecati velit eveniet iusto, porro id amet numquam doloremque. Sunt rem sequi earum! Voluptates consequatur hic recusandae sed facere necessitatibus iste fugiat quibusdam?</p>
</div>
</body>
</html>
CSS
body{
position: relative;
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.container{
padding: 5px 10px;
border-radius: 5px;
width: 300px;
border: 10px solid #111;
/* border-image property */
border-image-source: url(https://i.pinimg.com/originals/59/59/9a/59599a7d3bc0e59ec1aae1903677494c.jpg);
border-image-slice: 55;
}
.container .title{
font-size: 1.7rem;
color: #111;
font-weight: bold;
margin: 10px 0;
}
.container p{
text-align: justify;
}
0 Comments