- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The max-width Property in CSS
We can define a fixed max-width for an element’s content box using CSS max-width property which does not allows the element’s content box to be wider even if width is greater than max-width.
Syntax
The syntax of CSS max-width property is as follows −
Selector { max-width: /*value*/ }
Let’s see an example for CSS max-width property −
Example
<!DOCTYPE html> <html> <head> <title>CSS max-width Property</title> </head> <style> * { padding: 2px; margin:5px; } button { border-radius: 10px; } #containerDiv { width:70%; margin: 0 auto; padding:20px; background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%); text-align: center; border-radius: 10px; } #contentDiv{ max-width:200px; overflow: hidden; } </style> <body> <div id="containerDiv"> <div id="contentDiv"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <button onclick="add()" class="btn">Set maxWidth</button> </div> <script> function add() { document.querySelector('#contentDiv').style.maxWidth = "100%"; } </script> </body> </html>
Output
Before clicking ‘Set maxWidth’ button −
After clicking ‘Set maxWidth’ button −
Let’s see another example for the CSS max-width property −
Example
<!DOCTYPE html> <html> <head> <title>CSS max-width Property</title> </head> <style> * { padding: 2px; margin:5px; } button { border-radius: 10px; } #containerDiv { width:70%; margin: 0 auto; padding:20px; background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%); text-align: center; border-radius: 10px; } #contentDiv1, #contentDiv2{ width:100%; border: 1px solid black; margin: 0 auto; } #contentDiv2{ width: 80%; } </style> <body> <div id="containerDiv"> <div id="contentDiv1"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <div id="contentDiv2"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy. </div> <button onclick="add()" class="btn">Set maxWidth</button> </div> <script> function add() { document.querySelector('#contentDiv1').style.maxWidth = "80%"; } </script></body></html>
Output
Before clicking ‘Set maxWidth’ button −
After clicking ‘Set maxWidth’ button −
- Related Articles
- CSS max-width property
- Use CSS max-width property for responsive image
- Use CSS max-width property responsive for video player
- The max-height Property in CSS
- Perform Animation on CSS max-width
- CSS width property
- CSS max-height property
- The border-width Property in CSS
- The outline-width Property in CSS
- The min-width Property in CSS
- CSS min-width property
- CSS outline-width property
- Animate CSS width property
- Set min-width and max-width of an element using CSS
- Usage of border-width property in CSS

Advertisements