Problems with <Progress> tag stylization in CSS

Question

I’m having trouble styling a tag <progress>. I can not change the internal color and the inner part comes out half "square", sometimes even exceeding the margin. How can I solve?

On the left as it came out in Chrome and Firefox.

Structure of HTML:

<div class="lateralesquerda">
    <div class="blocosesq habilidades">
        <h5>Habilidades Profissionais</h5>
        <p>qwe123</p> 
        <p> <progress value="60" max="100"></progress></p>
        <p>Lorem Ipsum</p> 
        <p> <progress value="25" max="100"></progress></p>
        <p>abcdef</p>
        <p> <progress value="10" max="100"></progress></p>
        <p>12346</p>
        <p> <progress value="20" max="100"></progress></p>
        <p>zxcv</p>
        <p> <progress value="30" max="100"></progress></p>
    </div>
</div>

Structure of the CSS:

@charset "UTF-8";

body{
    font-family: Times, serif;
    text-align: justify;
    background-color: #EBE9E9;
    color: rgba(0, 0, 0, 1);
    /*overflow: hidden;*/
    word-wrap: break-word;
}

p{
    text-align: justify;
    text-indent: 1pt;
}

.lateralesquerda{
    display: block;
    width: 15%;
    border-right: 0.01em solid rgba(193, 193, 193, 0.7);
    float: left;
    background-color: #b0c4de;
    margin-top: -0.47em;
    margin-left:-6pt;
    box-shadow: 0px 0px 10px rgba(193,193,193,0.6);
}

progress{
    display: block;
    width: 15em;
    margin: 1px auto;
    padding: 1px;
    border: 0 none;
    background: #888;
    border-radius: 20px;
}

My goal was to do something more or less like this:

Thanks in advance.

Answer 1

About the progress bar just you put overflow:hidden it solves. With the overflow the background will respect your border-radius .

Something else instead of using padding of 1px to "push" the progress inside use the property border with 1px :). That way it’s easier for you to control the component.

Behold: (left commented where I changed)

@charset "UTF-8";

body{
    font-family: Times, serif;
    text-align: justify;
    background-color: #EBE9E9;
    color: rgba(0, 0, 0, 1);
    /*overflow: hidden;*/
    word-wrap: break-word;
}

p{
    text-align: justify;
    text-indent: 1pt;
}

.lateralesquerda{
    display: block;
    width: 15%;
    border-right: 0.01em solid rgba(193, 193, 193, 0.7);
    float: left;
    background-color: #b0c4de;
    margin-top: -0.47em;
    margin-left:-6pt;
    box-shadow: 0px 0px 10px rgba(193,193,193,0.6);
}

progress{
    display: block;
    width: 15em;
    margin: 1px auto;
    /* padding: 1px; */
    border: 0 none;
    background: #888;
    border-radius: 20px;
/* coloque overflow aqui */
    overflow: hidden;
    border: 1px solid #888;
}
    

<div class="lateralesquerda">
    <div class="blocosesq habilidades">
        <h5>Habilidades Profissionais</h5>
        <p>qwe123</p> 
        <p> <progress value="100" max="100"></progress></p>
        <p>Lorem Ipsum</p> 
        <p> <progress value="25" max="100"></progress></p>
        <p>abcdef</p>
        <p> <progress value="10" max="100"></progress></p>
        <p>12346</p>
        <p> <progress value="20" max="100"></progress></p>
        <p>zxcv</p>
        <p> <progress value="30" max="100"></progress></p>
    </div>
</div>

---

type="range"

And on this other model you’ll need to use the <input type="range">, recommend you read here: Range: change color of progress bar in Chrome

Answer 2

Besides putting overflow: hidden, create a pseudo ::after to correct the edges.

When zooming in on the browser, see how poorly the border looks with just the overflow: hidden:

See now with the ::after how right you look:

Testing:

body{
    font-family: Times, serif;
    text-align: justify;
    background-color: #EBE9E9;
    color: rgba(0, 0, 0, 1);
    /*overflow: hidden;*/
    word-wrap: break-word;
}

p{
    text-align: justify;
    text-indent: 1pt;
}

.lateralesquerda{
    display: block;
    width: 15%;
    border-right: 0.01em solid rgba(193, 193, 193, 0.7);
    float: left;
    background-color: #b0c4de;
    margin-top: -0.47em;
    margin-left:-6pt;
    box-shadow: 0px 0px 10px rgba(193,193,193,0.6);
}

progress{
    display: block;
    width: 15em;
    margin: 1px auto;
    padding: 1px;
    border: 0 none;
    background: #888;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

progress::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   border: 1px solid #888;
   border-radius: 20px;
}

<div class="lateralesquerda">
    <div class="blocosesq habilidades">
        <h5>Habilidades Profissionais</h5>
        <p>qwe123</p> 
        <p> <progress value="60" max="100"></progress></p>
        <p>Lorem Ipsum</p> 
        <p> <progress value="100" max="100"></progress></p>
        <p>abcdef</p>
        <p> <progress value="100" max="100"></progress></p>
        <p>12346</p>
        <p> <progress value="20" max="100"></progress></p>
        <p>zxcv</p>
        <p> <progress value="30" max="100"></progress></p>
    </div>
</div>

Answer 3

progress{
  border: 0;
  width: 100%;
  height: 15px;
}
progress::-webkit-progress-bar {
  /* style rules */
  background-color: rgb(0, 0, 0);
  border-radius: 20px;
}
progress::-webkit-progress-value {
  /* style rules */
  /* background-color: #3d3d3d; */
  background-image:
       -webkit-linear-gradient(-45deg, 
                               transparent 33%, rgb(0, 153, 255, .45) 33%, 
                               rgb(0, 0, 255, .45) 66%, transparent 66%),
       -webkit-linear-gradient(top, 
                               rgba(255, 255, 255, .25), 
                               rgba(0, 0, 0, .25)),
     -webkit-linear-gradient(left, #000000, #3d3d3d);
  background-size: 35px 20px, 100% 100%, 100% 100%;
  
  border-radius: 20px;
  box-shadow: 0px 0px 4px 0.5px rgb(141, 141, 141);
  transition: 10s;
}