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

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance. Link to image Here is a snippet of my HTML code: & ...

htmlcss

navigating to the start of a hyperlink

I'm having issues with scrolling to anchors and encountering 3 specific problems: If I hover over two panels and click a link to one of them, nothing happens. When I'm on section D and click on section C, it scrolls to the end of section C. ...

javascriptjqueryhtmlcss

Ways to horizontally align CSS boxes in Internet Explorer

I am facing a challenge in aligning three CSS boxes horizontally on my webpage. I attempted to achieve this by using the webkit and mozilla box orient and align properties. -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; ...

htmlcss

Changes influencing independent div elements

My goal is to design a front-end screen with images labeled steps 1-4 lined up next to each other. The concept is that when the user hovers over one of these steps, the corresponding image should fade in below them in a separate div. Upon removing the curs ...

csshtmlfrontendtransition

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

javascriptjqueryhtmlcontenteditable

Retain the jQuery dropdown menu in an open state while navigating to a different webpage on the

I am encountering an issue with a drop-down menu on my website. Whenever I click on a submenu link, the new page opens but the menu automatically closes. However, I want the active menu to remain open even on the new page. To solve this problem, I believe ...

javascriptjqueryhtmlcssajax

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

javascriptcssunit-testingbrowsersyntax-error

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

javascriptjqueryhtmlcssiframe

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

I'm trying to figure out how to filter an ng-repeat function based on the first letter of each option. For example, I want to filter a set of array or string so that only options starting with "A" or "B" are displayed. Can anyone help me with this? H ...

javascripthtmlangularjs

Issues with the performance of input range sliders in iOS Safari is causing frustration

I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...

htmlreactjsnext.jssafari

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

cssreactjsmaterial-uistyling

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...

cssreactjsconditional-operatorconditional-renderingreact-css-modules

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

It may be a bit challenging to convey this idea clearly. I am interested in creating distinct home pages based on the source from which visitors arrive. For instance, if they come from FaceBook, I envision a tailored home page for FaceBook users. If they ...

javascripthtmlcssfacebook

Guide on incorporating data from a text file into an HTML table

I'm attempting to showcase the records from upload.txt in an HTML table. The location of the upload.txt file is at this URL: http://localhost:3000/upload. When accessing this URL, it retrieves the upload.txt file. Currently, I am using node.js for r ...

jqueryhtmlajax

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

javascripthtmlcsscanvas

get the value of the last selected element using jQuery

I am facing an issue where I cannot retrieve the selected value from my second select element. Even though I have selected the second option in the dropdown, it keeps returning the value of the first option as empty. Here is a snippet of the HTML code: & ...

jqueryhtmljquery-selectors

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

cssdrop-down-menuz-index