The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Border Radius for Outline?

  • # December 30, 2012 at 1:05 pm

    I’m creating a double border using the border and outline property. I’ve applied border radius to the border. Unfortunately, I have no idea how to apply a radius on the outline.

    [My live example can be viewed here.]( “”)

    [My full comment CSS can be viewed here.]( “”)

    #comments .comment-body {
    border:10px solid #FFF;
    outline:1px solid #DDD;
    -webkit-border-radius: 50px!important;
    -moz-border-radius: 50px!important;
    border-radius: 50px!important

    # December 30, 2012 at 1:20 pm

    how about using a box-shadow instead?

    box-shadow: 0 0 3px #ddd;

    # December 30, 2012 at 1:21 pm

    Use box-shadow.

    @wolfcry911 beat me to it.

    # December 30, 2012 at 1:29 pm

    This reply has been reported for inappropriate content.

    Is there a way to apply the radius to both the border and the box shadow?

    # December 30, 2012 at 1:32 pm

    alternatively, you could use a 1px border and use background-clip: content-box. This would require adjusting the padding on the container and margin on children

    # December 30, 2012 at 1:33 pm

    box-shadow should have the border radius by default. tested in FF and works

    # December 30, 2012 at 1:37 pm

    This reply has been reported for inappropriate content.

    I’m attempting to get both the grey area and outer border (through whichever CSS means) to have a matching radius

    It seems with these solutions the box-shadow or the border gets the radius, not both.

    #comments .comment-body {
    border:10px solid #FFF;
    box-shadow: 0 0 3px #000;
    -webkit-border-radius: 10px!important;
    -moz-border-radius: 10px!important;
    border-radius: 10px!important

    # December 30, 2012 at 1:42 pm

    what browser are you using? Works for me in FF and Safari on Mac

    # December 30, 2012 at 1:45 pm

    lose the prefixed border-radius and !important – they’re not needed any longer.

    and the border-radius needs to be larger than the border width or the interior (background) will be square.

    # December 30, 2012 at 2:00 pm

    This reply has been reported for inappropriate content.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed