Here is the code:
<code>.container {
height: 300px;
width: 300px;
border: 2px solid red;
border-radius: 15px;
overflow: hidden;
}
.background {
background: green;
height: 100%;
width: 100%;
}</code>
<code>.container {
height: 300px;
width: 300px;
border: 2px solid red;
border-radius: 15px;
overflow: hidden;
}
.background {
background: green;
height: 100%;
width: 100%;
}</code>
.container {
height: 300px;
width: 300px;
border: 2px solid red;
border-radius: 15px;
overflow: hidden;
}
.background {
background: green;
height: 100%;
width: 100%;
}<code><div class="container">
<div class="background"></div>
</div></code>
<code><div class="container">
<div class="background"></div>
</div></code>
<div class="container">
<div class="background"></div>
</div>It produces the the view like this:
How can I get rid of the white ghost pixels between the background and the border?
You can use box-shadow it’s because the box-shadow property is good option to make sharp and cleaned border without any white ghost pixels.
Below is the sample code:
<code><html>
<head>
<style>
.container {
height: 300px;
width: 300px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 0 2px red;
}
.background {
background: green;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="background"></div>
</div>
</body>
</html>
</code>
<code><html>
<head>
<style>
.container {
height: 300px;
width: 300px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 0 2px red;
}
.background {
background: green;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="background"></div>
</div>
</body>
</html>
</code>
<html>
<head>
<style>
.container {
height: 300px;
width: 300px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 0 2px red;
}
.background {
background: green;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="background"></div>
</div>
</body>
</html>