Hi dear welcome to Ascode Blog . In this post we are going to learn Border Vs Outline Diffrence. 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 border vs outline</title>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, iure nam? Sunt odio asperiores nulla, obcaecati tempora quibusdam ut, incidunt dolorum ea quidem suscipit, corrupti corporis cupiditate fugiat fugit doloremque possimus! Officia possimus numquam, ipsum debitis corrupti rem minus odit, aliquid vitae necessitatibus vel consectetur sapiente a? Molestiae, voluptatem Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis voluptas iure consequuntur adipisci aperiam sapiente dolores? Repudiandae eveniet obcaecati tempora provident amet expedita iste exercitationem, debitis nostrum, ducimus recusandae minus.
</div>
</body>
</html>
<style>
CSS
body{
position: relative;
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.container {
padding: 5px 10px;
width: 300px;
border-radius: 5px;
/* border work inside its take huge space*/
border: 5px solid #111;
/* outline work-outside its take littile space */
outline: 5px solid #090;
/* you can pactrice by comment and uncoment them you can see the diffrence */
}
0 Comments