How to set radius for outline

2k Views Asked by thewebtud At 02 April 2025 at 22:59

I want to use border and outline on my element with some radius.

border-radius is only working for border.

Is there any way to apply radius on outline too?

.myElement {
    border: 2px solid #0064D2;
    outline: 2px solid #0099F8;
    border-radius: 3px;
}

Original Q&A

There are 2 best solutions below

Richard Hunter On 17 October 2020 at 19:25 BEST ANSWER

Not currently, though I believe it's planned, but you can simulate it with a box-shadow instead.

.myElement {
  border: 2px solid #0064D2;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #0099f8;
}

<div class="myElement">
  Hello World
</div>

ali nazari On 17 October 2020 at 19:24

unfortunately there is no way to add outline radius, but you can have same result with box shadow.

.myElement {
  width: 200px;
  height: 100px;
  border: 3px solid #0064d2;
  box-shadow: 1px 1px 0px 5px #c70707;
  border-radius: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <div class="myElement"></div>
</body>

</html>

How to set radius for outline

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in SASS

Related Questions in OUTLINE

Trending Questions

Popular # Hahtags

Popular Questions