Outline radius?

Is there any way of getting rounded corners on the outline of a div element, similar to border-radius?

Solution 1:

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">

Solution 2:

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>

Solution 3:

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

Solution 4:

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