CODEWITHSUNDEEP
css
zelocalhost
zelocalhost

Reputation: 1183

border radius partially broken

I tried the overflow:hidden solution for a background which breaks border-radius: http://jsfiddle.net/ypjDC/17/

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;">
  <div style="float: left; width: 50px; background-color: #800000;">
    <p>test</p>
  </div>

  <div style="float: right; width: 50px; background-color: #800000;">test</div>

  <div style="clear: both;"></div>
</div>

but there is always a problem, you can see a little white space on the corners.

How can I correct that?

Upvotes: 0

Views: 2218

Answers (1)

EdenSource
EdenSource

Reputation: 3387

You can add a inset box-shadow that has the same color of your border to your main DIV :

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;box-shadow: 0px 0px 0px 1px #000 inset;">

It modify a bit your border appearance, but remove the white area.

FIDDLE

Upvotes: 2

Related Questions