Is it possible to create an outline border with radius?

Question

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

Why not just use `border: 10px solid red;`? – daGUY Feb 15 '13 at 13:48 — daGUY, Feb 15 '13 at 13:48
I want to have 2 borders on a object, @daGUY ;) – Caspert Feb 15 '13 at 13:49 — Caspert, Feb 15 '13 at 13:49

score 46 · Answer 1 · edited Apr 29 '21 at 20:12

Try using CSS-Tricks' Infinite Borders technique and applying border-radius.

This method will require borders and box-shadow and not outline.

Dog with infinite rounded borders!

img {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
    
        
    /* If you could do pseudo elements 
       you could get a few more... */
    
    /* Also, HSL is awesome but don't use it if
       you need super old browser support */
}

body { padding: 50px; text-align: center; }

<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">

@MichaelYaeger I used the infinite borders technique linked and added a `border-radius` property to the same selector. Perhaps that's what the fiddle that 404s did too. — Taylor D. Edmiston, Dec 27 '16 at 21:27
Please keep in mind that this approach only works with `block`-like elements, but not with line-breaking inline links. — Regaddi, Jul 02 '21 at 12:17

score 30 · Accepted Answer · answered Feb 15 '13 at 14:18

30

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.

answered Feb 15 '13 at 14:18

robertc

74,533
18
193
177

2

The WebKit issue in your link has since been reopened, as the spec indicates that the outline should follow the border-radius property. – Adam Jul 15 '19 at 17:19

score 0 · Answer 3 · answered Jan 03 '17 at 15:25

0

@MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.

answered Jan 03 '17 at 15:25

RyNo's

21
3

Is it possible to create an outline border with radius?

3 Answers3

Linked