Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded border and wanted to change colour of focus outline. I couldn't tame the horrid square outline to the input control.

So instead, I used box-shadow. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

<input class="text1"> 
<br>
<br>
<input type=text class="text2">

I usually accomplish this using the :after pseudo-element:

of course it depends on usage, this method allows control over individual borders, rather than using the hard shadow method.

you could also set -1px offsets and use a background linear gradient (no border) for a different effect once again.

body {
  margin: 20px;
}

a {
  background: #999;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  position: relative;
  border: 2px solid #000;
}

a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}

<a href="#">Button</a>

Similar to Lea Hayes above, but here's how I did it:

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}

<div></div>

No nesting of DIVs or jQuery necessary, Altho for brevity I have left out the -moz and -webkit variants of some of the CSS. You can see the result above

Use this one: box-shadow: 0px 0px 0px 1px red;

I wanted some nice focus accessibility for dropdown menus in a Bootstrap navbar, and was pretty happy with this:

     a.dropdown-toggle:focus {
         display: inline-block;
         box-shadow: 0 0 0 2px #88b8ff;
         border-radius: 2px;
     }

<a href="" class="dropdown-toggle">Visit Stackoverflow</a>

We may see our wishes soonish by setting outline-style: auto It's on WebKits radar:

See ya in 2030.

You're looking for something like this, I think.

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

Edit

There is a Firefox-only -moz-outline-radius properly, but that won't work on IE/Chrome/Safari/Opera/etc. So, it looks like the most cross-browser-compatible way^* to get a curved line around a border is to use a wrapper div:

div.inner {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: #CCC;
  height: 100px;
  width: 160px;
}

div.outer {
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid red;
}

<div class="outer">
  <div class="inner"></div>
</div>

^{*aside from using images}

Firefox 88+: border-radius

From April 2021 you will be able to use a simple CSS for Firefox:

.actual {
  outline: solid red;
  border-radius: 10px;
}

.expected {
  border: solid red;
  border-radius: 10px;
}

In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span>

Current behaviour in Firefox 86.0:

Webkit: no solution

Using outline-style: auto will tell the «user agent to render a custom outline style»: see [MDN]((.

Webkit-based browsers will then draw the outline over the border, when you use outline-style: auto. It's difficult to style it properly.

.actual {
  outline: auto red;
  border-radius: 10px;
}

.expected {
  border: solid red;
  border-radius: 10px;
}

In WebKit browsers (Chrome, Edge),
<span class="actual">this outline</span>
should look close to
<span class="expected">this border</span>

Current behaviour in Chrome 89.0:

More information

From Firefox 88 (to be released April 20 2021), outline will follow the shape of border-radius.
The current -moz-outline-radius will become redundant and will be removed.

See MDN's entry about -moz-outline-radius:

From Firefox 88 onwards, the standard outline property will follow the shape of border-radius, making -moz-outline-radius properties redundant. As such, this property will be removed.

As far as I know, the Outline radius is only supported by Firefox and Firefox for android.
(Jul 2021)