CODEWITHSUNDEEP
css
Girish Sawant
Girish Sawant

Reputation: 18

Progress Border using css on div

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.

progress border

Upvotes: 0

Views: 2153

Answers (1)

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

: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>

Upvotes: 7

Related Questions