Grow your CSS skills. Land your dream job.

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.](http://themeforward.com/demo2/?p=1948#comments “”)

    [My full comment CSS can be viewed here.](http://snippi.com/s/5tugbhk “”)

    #comments .comment-body {
    min-height:150px;
    margin-left:65px;
    background:#EEE;
    padding:15px;
    border:10px solid #FFF;
    outline:1px solid #DDD;
    margin-bottom:10px;
    -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

    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

    I’m attempting to get both the grey area and outer border (through whichever CSS means) to have a matching radius [http://themeforward.com/demo2/?p=1948#comments](http://themeforward.com/demo2/?p=1948#comments “”)

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

    #comments .comment-body {
    min-height:150px;
    margin-left:70px;
    background:#EEE;
    padding:15px;
    border:10px solid #FFF;
    box-shadow: 0 0 3px #000;
    margin-bottom:10px;
    -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

    Thanks!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".