CSS min-width Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

CSS min-width Property

CSS min-width property specifies the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

Note: max-width overrides width, but min-width overrides max-width.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ min-width: 300px; padding: 25px 0; border: 1px solid #8c8c8c; } </style> </head> <body> <div id="point"> Minimum width of this container (div) is 300px. </div> </body> </html>

Run

Syntax

Using CSS

element{ min-width: 500px; }

Using Javascript

object.style.minWidth="500px";

Animatable

Yes, min-width property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS min-width property is 0px.

Property Value

The following table provides a list of values for CSS min-width property.

Value	Explanation
%	Specifies the minimum width as a percentage of the containing block's content width.
length	Specifies the minimum width (px, cm, etc) as an absolute value.

Using JavaScript

In the following example, we will demonstrate how to change the CSS min-width property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ padding: 25px 0; border: 1px solid #8c8c8c; } </style> </head> <body> <div id="point"> Minimum width of this container (div) is 0. </div> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point"); x.style.minWidth = "500px" } </script> </body> </html>

Run