Box shadow around rounded corners?

css, html, less

Solution

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;
}

Problem

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?

Original source