Search code examples
htmlcssoutline

Is it possible to create an outline border with radius?

I known you can add an outline border with CSS3.

outline: 10px solid red;

Now I was wondering how I can add also a radius to that outline border.

I have tried this one, but doesn't work:

.radius {
    padding: 20px 60px;
    text-transform: capitalize;

    -moz-outline: 10;
    outline: 10px solid red;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;    
}
Solution

  • Firefox has a property -moz-outline-radius, however the request to implement a similar feature in WebKit was closed as WONTFIX. The plan for the future is to make the outlines follow the borders.

    I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.