Stylish border radius for Bootstrap progress bars

Here is a snippet of code that I am struggling with:

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: 2px solid #337AB7;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

I am trying to figure out why there is whitespace on the left side and how to remove it.

https://i.stack.imgur.com/QgVTz.png

htmlcsstwitter-bootstrap-3progress-bar

Answer №1

There seems to be a rendering issue caused by the border CSS in the .progress class. The children elements are being resized as a result.

In this scenario, the height of the .progress-bar element is actually decreased by 4px due to the 2px border (2px top + 2px bottom), causing a difference in the curvature of the radius.

To resolve this, you can utilize a box-shadow instead as it does not affect the size of its child elements.

.progress-bar{
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.progress{
    border-radius: 40px !important;
    background-color: white !important;
    
    /* Changes below */
    -webkit-box-shadow: inset 0 0 0 2px #337AB7 !important;
  -moz-box-shadow: inset 0 0 0 2px #337AB7 !important;
  box-shadow: inset 0 0 0 2px #337AB7 !important;
    border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintain the div's aspect ratio by adjusting its width according to its height

I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...

csshtmlheightwidth

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

Make the background image come to life by animating it from the bottom to the top in

Upon landing on a page, I aim for the background image to initially focus on the bottom and then pan up to the top before returning back down in a continuous loop. The code I have set up is as follows: <body> <div id="container"></div&g ...

jqueryhtmlcssjquery-animate

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

https://i.stack.imgur.com/Wjtn5.png Hello there, I'm trying to make the numbers in the first group match the style of the second group (noche, mañana...). I've set both the group and individual element width to 100%, but the numbers beyond 22 ...

htmlcssangulartypescriptangular-material

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

Assigning a new classification to the primary object in the evolving array of objects

I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in t ...

javascriptcssvue.jsobjectvuejs2

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Conceal the div if it remains unhidden within the following 10 seconds

This piece of code is designed to show a loader image until the page finishes loading. Here is the code snippet: document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { $('#unti ...

javascriptjqueryhtmlajax

Turn off the ripple effect for this element

I am looking to turn off the ripple effect on an ion-chip component, which activates when clicked: <ion-chip> <ion-label>Hey</ion-label> </ion-chip> Is there a way to accomplish this? ...

htmlcssionic-framework

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA! http://jsfiddle.net/dragont ...

csslayoutflexboxbootstrap-4

The buttons mysteriously vanish when hovered over in Internet Explorer 11

I've encountered a strange issue with my website www.webfounded.com when viewed in Internet Explorer - all of my bootstrap buttons disappear on hover! Despite adding CSS classes for multiple browser compatibility and even attempting to remove the hove ...

jqueryhtmlcsstwitter-bootstrap-3

Tips for ensuring a webpage loads at a specific resolution

I recently created a website on my computer with a screen resolution of 1920x1020. However, when I view it on other machines with a 1366x768 resolution, the website appears distorted. Is there a way to set a fixed resolution for my website to ensure it l ...

javascripthtmlcss

Time whizzes by too swiftly

After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly. This is what I implemented in my attempt ...

javascripthtmlcss

Arranging expandable divs horizontally

Looking for a way to align these blocks so they can expand while remaining in line, I'm struggling with maintaining their individual spaces. The layout I have in mind is as follows: In this setup, box 2 and 3 should automatically adjust to fill the a ...

htmlcss

ASP not recognizing AngularJS input states

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Staffing_Tool.Login" %> <!DOCTYPE html> <html> <head runat="server"> <script src="scripts/angular.min.js" type="text/javascript"></scr ...

htmlasp.netangularjs

Animate an image to the right when clicked, then return it to the left with a second click

Seeking help with animating a set of images to move individually 300px right on first click, and then 300px left when clicked again. I'm currently facing an issue where my code is not working. It could be due to A) syntax errors or B) the images not ...

javascriptjqueryhtmlcssjquery-animate

How to align an image in the center of a circular flex container

I'm facing an issue in my Angular project where I have the following code snippet: onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsData ...

javascripthtmlcssangulartypescript

Adjust the background color of the arrow in an HTML Select element

My select menu looks different in Firefox compared to Chrome/Edge In Firefox, it displays an "arrow button" https://i.stack.imgur.com/BGFvO.png However, in Chrome/Edge, the arrow button is not present https://i.stack.imgur.com/PXNJn.png Is there a way ...

htmlcssgoogle-chromefirefox

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

jquerycssmodel-view-controller