Rounded progress bar

Question

I would like to know if it is possible to add the same style of the end of the element in the end of its progress bar (see red circles). I would like to use only one element, maybe editing linear-gradient.

How can I do it? Thanks?

<div style="width:100%; height:15px; border:1px solid #2a5682;
            box-sizing:border-box; padding:1px; 
            background-clip:content-box; 
            background-image:linear-gradient(to right, #2a5682 0, #2a5682 50%, transparent 50%, transparent 100%); 
            border-radius:8px"></div>

Answer 1

Why use a <div> tag to draw a progress bar when the <progress> tag already exists?
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress

The code snippet below shows how to accomplish this with the <progress> tag.

* {
  box-sizing: content-box;
}
progress {
  margin        : 2em;
  padding       : 3px;
  border        : 2px solid #35515e;
  height        : 20px;
  width         : 200px;
  border-radius : 17px;
  background    : transparent;
}
progress::-moz-progress-bar {
  background    : #2a5781;
  border-radius : 10px;
}
progress::-webkit-progress-value {
  background    : #2a5781;
  border-radius : 10px;
}
progress::-webkit-progress-bar {
  background    : transparent;
}

<progress value="70" max="100"></progress>