Radius garis besar?

 /* Smooth outline with box-shadow: */
    .text1:focus {
        box-shadow: 0 0 3pt 2pt red;
    }

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

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

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>

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>

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

<a href="https://stackoverflow.com" class="dropdown-toggle">Visit Stackoverflow</a>

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>

.embossed {
  background: #e5e5e5;
  height: 100px;
  width: 200px;
  border: #FFFFFF solid 1px;
  outline: #d0d0d0 solid 1px;
  margin: 15px;
}

.border-radius {
  border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
}

.outline-radius {
  -moz-outline-radius: 21px;
}

<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>

.has-outline {
    display: inline-block;
    background: #51ab9f;
    border-radius: 10px;
    padding: 5px;
    position: relative;
}
.has-outline:after {
  border-radius: 10px;
  padding: 5px;
  border: 2px dashed #9dd5cf;
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
}

<div class="has-outline">
  I can haz outline
</div>

.outline {
    border: 2px dotted transparent;
    border-radius: 5px;
    display: inline-block;
    padding: 2px;
    margin: -4px;
}

/* :focus-within does not work in Edge or IE */
.outline:focus-within, .outline.edge {
    border-color: blue;
}

br {
    margin-bottom: 0.75rem;
}

<h3>Javascript-Free Demo</h3>
<div class="outline edge"><input type="text" placeholder="I always have an outline"/></div><br><div class="outline"><input type="text" placeholder="I have an outline when focused"/></div> *<i>Doesn't work in Edge or IE</i><br><input type="text" placeholder="I have never have an outline" />
<p>Note that the outline does not increase the spacing between the outlined input and other elements around it. The margin (-4px) compensates for the space that the outlines padding (-2px) and width (2px) take up, a total of 4px.</p>

h3 {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.clickable {
  cursor: pointer;
}

.box {
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  height: 5rem;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 0.5rem;
  margin: 1rem;
}

<h3>Javascript-Enabled Demo</h3>
<div class="flex">
  <div class="box outline-me">I'm outlined because I contain<br>the "outline-me" class</div>
  <div class="box clickable">Click me to toggle outline</div>
</div>
<hr>
<input type="text" placeholder="I'm outlined when focused" />

<script>
// Called on an element to wrap with an outline and passed a styleObject
// the styleObject can contain the following outline properties:
// 		style, width, color, offset, radius, bottomLeftRadius,
//		bottomRightRadius, topLeftRadius, topRightRadius
// It then creates a new div with the properties specified and 
// moves the calling element into the div
// The newly created wrapper div receives the class "simulated-outline"
Element.prototype.addOutline = function (styleObject, hideOutline = true) {
    var element = this;

    // create a div for simulating an outline
    var outline = document.createElement('div');

    // initialize css formatting
    var css = 'display:inline-block;';

    // transfer any element margin to the outline div
    var margins = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
    var marginPropertyNames = { 
        marginTop: 'margin-top',
        marginBottom: 'margin-bottom',
        marginLeft: 'margin-left',
        marginRight: 'margin-right'
    }
    var outlineWidth = Number.parseInt(styleObject.width);
    var outlineOffset = Number.parseInt(styleObject.offset);
    for (var i = 0; i < margins.length; ++i) {
        var computedMargin = Number.parseInt(getComputedStyle(element)[margins[i]]);
        var margin = computedMargin - outlineWidth - outlineOffset;
        css += marginPropertyNames[margins[i]] + ":" + margin + "px;";
    }
    element.style.cssText += 'margin:0px !important;';
    
    // compute css border style for the outline div
    var keys = Object.keys(styleObject);
    for (var i = 0; i < keys.length; ++i) {
        var key = keys[i];
        var value = styleObject[key];
        switch (key) {
            case 'style':
                var property = 'border-style';
                break;
            case 'width':
                var property = 'border-width';
                break;
            case 'color':
                var property = 'border-color';
                break;
            case 'offset':
                var property = 'padding';
                break;
            case 'radius':
                var property = 'border-radius';
                break;
            case 'bottomLeftRadius':
                var property = 'border-bottom-left-radius';
                break;
            case 'bottomRightRadius':
                var property = 'border-bottom-right-radius';
                break;
            case 'topLeftRadius':
                var property = 'border-top-left-radius-style';
                break;
            case 'topRightRadius':
                var property = 'border-top-right-radius';
                break;
        }
        css += property + ":" + value + ';';
    }
    
    // apply the computed css to the outline div
    outline.style.cssText = css;
    
    // add a class in case we want to do something with elements
    // receiving a simulated outline
    outline.classList.add('simulated-outline');
    
    // place the element inside the outline div
    var parent = element.parentElement;
    parent.insertBefore(outline, element);
    outline.appendChild(element);

    // determine whether outline should be hidden by default or not
    if (hideOutline) element.hideOutline();
}

Element.prototype.showOutline = function () {
    var element = this;
    // get a reference to the outline element that wraps this element
    var outline = element.getOutline();
    // show the outline if one exists
    if (outline) outline.classList.remove('hide-outline');
}


Element.prototype.hideOutline = function () {
    var element = this;
    // get a reference to the outline element that wraps this element
    var outline = element.getOutline();
    // hide the outline if one exists
    if (outline) outline.classList.add('hide-outline');
}

// Determines if this element has an outline. If it does, it returns the outline
// element. If it doesn't have one, return null.
Element.prototype.getOutline = function() {
    var element = this;
    var parent = element.parentElement;
    return (parent.classList.contains('simulated-outline')) ? parent : null;
}

// Determines the visiblity status of the outline, returning true if the outline is
// visible and false if it is not. If the element has no outline, null is returned.
Element.prototype.outlineStatus = function() {
    var element = this;
    var outline = element.getOutline();
    if (outline === null) {
        return null;
    } else {
        return !outline.classList.contains('hide-outline');
    }
}

// this embeds a style element in the document head for handling outline visibility
var embeddedStyle = document.querySelector('#outline-styles');
if (!embeddedStyle) {
    var style = document.createElement('style');
    style.innerText = `
        .simulated-outline.hide-outline {
            border-color: transparent !important;
        }
    `;
    document.head.append(style);
}


/*########################## example usage ##########################*/

// add outline to all elements with "outline-me" class
var outlineMeStyle = {
    style: 'dashed',
    width: '3px',
    color: 'blue',
    offset: '2px',
    radius: '5px'
};
document.querySelectorAll('.outline-me').forEach((element)=>{
  element.addOutline(outlineMeStyle, false);
});


// make clickable divs get outlines
var outlineStyle = {
    style: 'double',
    width: '4px',
    offset: '3px',
    color: 'red',
    radius: '10px'
};
document.querySelectorAll('.clickable').forEach((element)=>{
    element.addOutline(outlineStyle);
    element.addEventListener('click', (evt)=>{
        var element = evt.target;
        (element.outlineStatus()) ? element.hideOutline() : element.showOutline();
    });
});


// configure inputs to only have outline on focus
document.querySelectorAll('input').forEach((input)=>{
    var outlineStyle = {
        width: '2px',
        offset: '2px',
        color: 'black',
        style: 'dotted',
        radius: '10px'
    }
    input.addOutline(outlineStyle);
    input.addEventListener('focus', (evt)=>{
        var input = evt.target;
        input.showOutline();
    });
    input.addEventListener('blur', (evt)=>{
        var input = evt.target;
        input.hideOutline();
    });
});
</script>