Progress Border using css on div

Question

First of all Thank you for the solutions,

I want to create a progress bordered div using HTML and CSS. Similar to the attached image. I need it with rounded borders.

Andrei Fedorov · Accepted Answer · 2022-10-17 14:55:38Z

7

:root {
  --count: 60%;
}

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

div {
  margin: auto;
  width: 200px;
  height: 160px;
  border-radius: 20px;
  position: relative;
  border: 1px solid #ddd;
  background-color: white;
}

div::after {
  content: '';
  display: block;
  position: absolute;
  left: -3px;
  top: -3px;
  right: -3px;
  bottom: -3px;
  background-color: transparent;
  background-image: conic-gradient(orange, orange var(--count), transparent var(--count));
  z-index: -100;
  border-radius: 21.5px;
}

<div></div>

answered Oct 17, 2022 at 14:55

Andrei Fedorov

4,0172 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Progress Border using css on div

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related