CSS Box Model Exploratorium

Help?

This application was created for several reasons, including DOM code practicing, implementation testing, help in typing the right properties & values and many more...

It's going to be a web application using DOM code for the smart browsers, and server roundtrips for the not so smart ones some day...

Units default to 'px' but you can include the unit if you want (e.g., you can write 2em in the padding box). You can also use rgba() in all the color fields, e.g., type rgba(0, 0, 0, 0.5) in a field and see what it looks like.

No guarantees & all that usual disclaiming stuff... by Chriztian Steinmeier.

Hide

PropertytoprightbottomleftAll?
border-width
border-style
border-color
padding
margin
Propertytop-lefttop-rightbottom-rightbottom-left 
border-radius
PropertyOffset LeftOffset TopSpreadColor 
box-shadow
background-color (bg-)opacity  
width height
Add vendor-prefixes  

	

The demo area below shows the results of the applied styles for the <div> with id="demobox". To visualize its margin properties, it has been wrapped in another <div> with a dashed red border. Finally, the actual CSS rule is printed, cut & paste-ready for convenience. (Can be shortened with shorthand properties, though).

Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with Lots of text to fill the box with