`::-webkit-progress-inner-element` CSS pseudo-element

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The ::-webkit-progress-inner-element CSS pseudo-element represents the outermost container of the <progress> element. It is the parent of the ::-webkit-progress-bar pseudo-element.

Note: In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element.

Syntax

css

::-webkit-progress-inner-element {
  /* ... */
}

Examples

These examples work only on Blink and WebKit.

Adding a black border around the progress bar

In this example, a 2px black border is added around the progress bar.

HTML

html

<progress value="10" max="50"></progress>

CSS

css

progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

Result

Result screenshot

If you're not using a Blink or WebKit browser, the above code results in a progress bar looking like this:

Specifications

Not part of any standard.

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`::-webkit-progress-inner-element` Non-standard	Chrome – Full support Chrome 23 (Release date: 2012-11-06) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 7 (Release date: 2013-10-22) footnote Full support	Chrome Android – Full support Chrome Android 25 (Release date: 2013-02-27) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 7 (Release date: 2013-09-18) footnote Full support	Samsung Internet – Full support Samsung Internet 1.5 (Release date: 2013-09-25) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 7 (Release date: 2013-09-18) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Non-standard. Check cross-browser support before using.

::-webkit-progress-inner-element CSS pseudo-element