EN
CSS - outline with radius
23 points
In this article, we would like to show how to create an outline with a radius using CSS.
Quick solution:
xxxxxxxxxx1
border-radius: 3px; /* 3px internal outline radius */2
box-shadow: 0px 0px 0px 5px #fff183; /* 5px outline width with #fff183 color */
Problem description:
outline does not provide outline-radius style property, so it is necessary to use some tricks (now we have 2021).
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.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
a.element {7
padding: 2px 5px;8
border-radius: 3px; /* <----------------------- required */9
background: #f7df1e;10
font-family: "Segoe UI";11
font-size: 16px;12
color: black;13
box-shadow: 0px 0px 0px 5px #fff183; /* <------ required */14
display: inline-block;15
}16
17
</style>18
</head>19
<body>20
<a class="element">#JavaScript</a>21
</body>22
</html>
