Give help. Get help.

  • # 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: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: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.

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

You must be logged in to reply to this topic.