title: How to make corners of progress bar round in css
body: <p>For my progress bar I would like to have the edges rounded and the percentage on display inside the progress bar. I managed to get the corners of the progress value to be round but not the bar/background. Also the animation doesn't seem to work. </p>
  
  <p>~css</p>
  
  <pre><code>.progress-bar body { 
  font-family: "Helvetica Neue", arial, sans-serif;
  padding: 2em;
  margin: 50px auto 0;
  max-width: 800px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  }
  
  
  .progress-bar .skill h3 { 
  font-size: 1em; 
  color: #fff;
  left: 1em;
  line-height: 1;
  position: absolute;
  top:1em;
  
  }
  
  progress { border-radius:15px; -moz-border-radius: 15px;}
  
  .progress-bar progress, progress[role] {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   background-size: auto;
   height: 50px;
   width: 100%;
   border-radius: 15px;
   -moz-border-radius: 15px;
   }
  
  
  
    .progress-bar .skill-list {
     list-style-type: none;
     margin: 0;
     padding: 1em;
  
     }
  
     .progress-bar .skill {
      margin-bottom: 1em;
      position: relative;
      list-style-type: none;
  
      }
  
      .progress-bar .skill ::-webkit-progress-value { 
      -webkit-animation: bar-fill 2s;
      width: 0px;
      -moz-border-radius: 15px;
      border-radius: 15px;
       }
  
  
  
       .progress-bar .skill-1::-webkit-progress-value {
       background: #ff9e2c;
       border-radius: 15px;
       -moz-border-radius: 15px;
       }
  
   .progress-bar .skill-1::-moz-progress-bar {
      background: #ff9e2c;
     border-radius: 15px;
     -moz-border-radius: 15px;
     }
  
    .progress-bar .skill-2::-webkit-progress-value {
    background: #4ecdc4;
    border-radius: 15px;
     -moz-border-radius: 15px;
    }
  
   .progress-bar .skill-2::-moz-progress-bar {
    background: #4ecdc4;
    border-radius: 15px;
   -moz-border-radius: 15px;
   }
  
   .progress-bar .skill-3::-webkit-progress-value {
   background: #ff6b6b;
   border-radius: 15px;
   -moz-border-radius: 15px;
   }
  
  .progress-bar .skill-3::-moz-progress-bar {
   background: #ff6b6b;
   border-radius: 15px;
   -moz-border-radius: 15px;
   }
  
  
  
  
   @-webkit-keyframes bar-fill {
    0% { width: 0; }
   }
   @keyframes bar-fill {
   0% { width: 0; }
   }
  </code></pre>
  
  <p>~html</p>
  
  <pre><code>&lt;div class="progress-bar"&gt;
  &lt;body&gt;
  &lt;ul class="skill-list"&gt;
    &lt;li class="skill"&gt;
      &lt;h3&gt;HTML/CSS&lt;/h3&gt;
      &lt;progress class="skill-1" max="100" value="80"&gt;
        &lt;h2&gt;80%&lt;/h2&gt;
      &lt;/progress&gt;
    &lt;/li&gt;
    &lt;li class="skill"&gt;
      &lt;h3&gt;Javascript&lt;/h3&gt;
      &lt;progress class="skill-2" max="100" value="45"&gt;
       &lt;h2&gt;45%&lt;/h2&gt;
      &lt;/progress&gt;
    &lt;/li&gt;
    &lt;li class="skill"&gt;
      &lt;h3&gt;PHP&lt;/h3&gt;
      &lt;progress class="skill-3" max="100" value="35"&gt;
        &lt;h2&gt;35%&lt;/h2&gt;
      &lt;/progress&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/div&gt;
  </code></pre>