The min-width property in CSS is used to define the minimum width of an element. The value of the width cannot be less than the value of the min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width.
Syntax:
min-width: length|initial|inherit;
Property Values:
- length: This property is used to set the length of min-width. The length can be set in the form of px, cm, etc.
- percentage (%): It is used to set the minimum width in percentage.
- initial: It is used to set a min-width property to its default value.
- inherit: This property is inherited from its parent.
Example: In this example, we use the min-width: length property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: 300px;
display: inline-block;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:a 
Example: In this example we are using the min-width: % property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: 35%;
display: inline-block;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output: 
Example: In this example, we are using min-width: initial property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: initial;
display: inline-block;
color: white;
background-color: green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output: 
Example: In this example, we are using min-width: inherit property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
.gfg {
min-width: initial;
display: inline-block;
color: white;
background-color: green;
}
P {
min-width: inherit;
}
.geeks {
min-width: initial;
display: inline-block;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="gfg">
<p>
GeeksforGeeks: A computer science portal
</p>
<div class="geeks">
GeeksforGeeks: A computer science portal
</div>
</div>
</body>
</html>
Output: 
Supported Browsers: The browser supported by min-width property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 7.0 and above
- Firefox 1.0 and above
- Safari 1.0 and above
- Opera 4.0 and above