Languages
[Edit]
EN

CSS - outline with radius

20 points
Created by:
Root-ssh
115270

In this article, we would like to show how to create an outline with a radius using CSS.

Quick solution:

border-radius: 3px;                   /* 3px internal outline radius          */
box-shadow: 0px 0px 0px 5px #fff183;  /* 5px outline width with #fff183 color */
Outline with radius in CSS.
Outline with radius in CSS.

 

Problem description:
outline does not provide outline-radius style property, so it is necessary to use some tricks.

Problem solution:

used box-shadow style property with:

  • blur set to 0,
  • spread set to some value,

and defined border-radius style property, give outline with radius effect.

Outline with radius in CSS - Google Chrome DevTools.
Outline with radius in CSS - Google Chrome DevTools.

Practical example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    a.element {
        padding: 2px 5px;
        border-radius: 3px;  /*  <----------------------- required */
        background: #f7df1e;
        font-family: "Segoe UI";
        font-size: 16px;
        color: black;
        box-shadow: 0px 0px 0px 5px #fff183;  /*  <------ required */
        display: inline-block;
    }

  </style>
</head>
<body>
  <a class="element">#JavaScript</a>
</body>
</html>

See also

  1. CSS - outline with padding and radius 
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join