Box shadow around rounded corners?

Question

I'm using Twitter's Bootstrap library to quickly throw together a prototype.

Here's what my layout looks like in HTML:

<div class="navbar-messages container">
    <div class="alert alert-info fade in">
        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Awesomeness!</strong> You're pretty cool.
    </div>
    <div class="alert alert-error fade in">
        <button class="close" data-dismiss="alert">&times;</button>
        <strong>Awesomeness!</strong> You're pretty cool.
    </div>
</div>

Here's what my LESS looks like:

div.navbar div.navbar-messages {
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2));

    div.alert {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        margin-bottom: 0px;

        &:last-child {
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
        }
    }
}

.drop-shadow(@params) {
    -moz-box-shadow: @params;
    -webkit-box-shadow: @params;
    box-shadow: @params;
}

What's really weird is that the drop shadow isn't curving around the child element's curved corners:

How can I make it properly curve around the corners?

Urena

Perhaps there is a gradient background behind the button that's not being clipped by the border-radius? I can't reproduce the problem using the code you gave in the question, see this jsfiddle. (Tested in FF and IE9, you don't mention a specific browser in your question.) – Lye

@Jeroen: Your fiddle doesn't match the code here. In this question, the box shadow is on a parent element. In your fiddle, the box shadow applies to only the div.alert elements. – Colton

Answer 1

Your div.navbar div.navbar-messages element lacks rounded corners, so the shadow appears square. As described by its name, box-shadow draws a shadow around the element's box, and not the element's contents, so if the box itself doesn't have rounded corners, then neither will its shadow.

You can try applying the same border-radius styles to div.navbar div.navbar-messages as well, so its shadow will curve around the corners:

div.navbar div.navbar-messages {
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2));
    .rounded-bottom-corners(4px);

    div.alert {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        margin-bottom: 0px;

        &:last-child {
            .rounded-bottom-corners(4px);
        }
    }
}

.drop-shadow(@params) {
    -moz-box-shadow: @params;
    -webkit-box-shadow: @params;
    box-shadow: @params;
}

.rounded-bottom-corners(@params) {
    -webkit-border-bottom-right-radius: @params;
    -webkit-border-bottom-left-radius: @params;
    -moz-border-radius-bottomright: @params;
    -moz-border-radius-bottomleft: @params;
    border-bottom-right-radius: @params;
    border-bottom-left-radius: @params;
}

Colton

I noticed you're passing params into your css example. I did a quick search and didn't find anything helpful. Is this for proof of concept or is that actually something you can do? – Gopherwood

@Jackson: It's a LESS feature. I just noticed now that the question isn't tagged [less], so I've added that in. You can read about it here: lesscss.org/#-parametric-mixins – Colton

Answer 2

I have this:

blockquote {
    border: none;
    font-style: italic;
    font-size: 20px;
    line-height: 40px;
    font-weight: 300;
    padding: 0;
    margin: 30px 0;
    text-shadow: 0 1px 1px #666666; 
    background: rgba(255,255, 255, 0.4);
    box-shadow: 0px 0.5px 1px #888888;
    padding-left: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

So:

-webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;

That worked for me pretty well! Thanks a lot.

Torbert

Answer 3

yep...just put a border-radius on the div that has the shadow. Make sure border-radius value matches that of the object inside the div and they will match up properly.

Zandrazandt

Answer 4

You could use the filter:drop-shadow() on your code instead of the default box-shadow

Here's an example:

div.navbar {
    filter: drop-shadow(5px 5px 10px #44444d81);
}

This does the trick

Kerato