CODEWITHSUNDEEP
background-imagecss
prawn
prawn

Reputation: 2653

rounded corner with background image discoloration

I have a div inside of a div. If you look at the top left and top right corners, you'll notice a thin line of discoloration around the curve of the div, that is, it isn't the background color. That tiny tiny little curved sliver. What is causing this?

Anyway to remedy this without having to remove the border radius?

Please see the fiddle http://jsfiddle.net/V24XB/7/

css is as follows

  .sub-area-title
{
     background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);

     border-bottom: 1px solid #cccccc;
    background-color: white;
    margin: 0 auto;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding:10px 75px 10px 75px;
    text-align:center;
    z-index:1000;
}

.sub-area-container
{
    display: inline-block;
    width: auto;
    min-width: 450px;
    background-color: white;
    min-height:100px;
    max-height: 400px;
    /*display:inline-block;*/
    margin: 0px 15px 35px 15px;
    border-left: 2px solid #6E6E6E;
    border-right:2px solid #6E6E6E;
    border-bottom:2px solid #6E6E6E;
    border-top:2px solid #6E6E6E;
    box-shadow: 0px 2px 12px #888888;
    border-radius: 10px;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    max-height: 300px;
    overflow-y: auto;
    z-index: 1;
}

NOTE: I'm primarily concerned with IE9+. Chrome and firefox and everything else are irrelevant in this particular case

Upvotes: 2

Views: 437

Answers (2)

Juan
Juan

Reputation: 5050

that's the background color of the .sub-area-container(change it an see), one way to work this out would be adding an inset box shadow to that container like this:

box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000;

DEMO

you can remove the body tag

Upvotes: 3

Spiff
Spiff

Reputation: 596

It's a bit of a hack but you could try to fill the background-color of your container under the title if you don't want to use an image.

Just replace your white background by a gradient filling the top 10px of your container.

Something like this should work on IE:

.sub-area-title
{
    background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
    border-bottom: 1px solid #cccccc;
    background-color: white;
    margin: 0 auto;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding:10px 75px 10px 75px;
    text-align:center;
    z-index:1000;
}

.sub-area-container
{
    display: inline-block;
    width: auto;
    min-width: 450px;
    background: -ms-linear-gradient(top, #636363 10px, #ffffff 11px, #ffffff 100%);
    min-height:100px;
    max-height: 400px;
    /*display:inline-block;*/
    margin: 0px 15px 35px 15px;
    border-left: 2px solid #6E6E6E;
    border-right:2px solid #6E6E6E;
    border-bottom:2px solid #6E6E6E;
    border-top:2px solid #6E6E6E;
    box-shadow: 0px 2px 12px #888888;
    border-radius: 10px;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    max-height: 300px;
    overflow-y: auto;
    z-index: 1;
}

Upvotes: 0

Related Questions