CODEWITHSUNDEEP
htmlcss
raju
raju

Reputation: 392

Issue of small 1px, 2px spacing , while using border radius ( in all browsers )

Here is a screen for the question above http://prntscr.com/66o7rf . When I use border-radius in parent div and overlap another background with same value of border-radius, there appears a small space ( in screen, white space appears ). I tried using background in :before and :after , but i don't think is a good way to do it.

Can anybody help with this?

body{
    background: grey;
}
div {
    width: 200px;
    height: 200px;
    background: #000;
    border-radius: 10px;
    padding-top: 160px;
    overflow: hidden;
}
.footer {
    width: 200px;
    height: 40px;
    background: #f00;
}
<div>
    <div class="footer"></div>
</div>

Upvotes: 0

Views: 498

Answers (1)

Bipu Bajgai
Bipu Bajgai

Reputation: 404

When you use border-radius in parent div, dont set overflow: hidden to it. And for overlapping div or child div of it add border-radius to it but 2px less than parent div. Example: 

div{
background: #fff;
border-radius: 10px;
}

.child{
background: blue;
border-radius: 8px;
}

Upvotes: 1

Related Questions