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 b

Answer 1

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.

Answer 2

@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.

Answer 3

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

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

Here is the fiddle link