Dave's Brain

Browse - Programming Tips - How can I make a nice looking box in html?

Date: 2015dec23
Language: html

Q.  How can I make a nice looking box in html?

A.  I'm no designer but I think something that works is having
the border a color that's close to the background color.
The background not too dark (so text is readable).  And rounded corners.

<style> .mybox { border: 3px solid #888; /* Gray border */ background: #ccc; /* Background is also gray - but lighter */ border-radius: 10px; /* Rounded corner */ margin: 10px; /* Generous amount of margin and padding */ padding: 10px; } </style> <div class=mybox> This box fills nearly the whole page width </div> <p/> <span class=mybox> This box is only as wide as the text </span>

Add a comment

Sign in to add a comment
Copyright © 2008-2018, dave - Code samples on Dave's Brain is licensed under the Creative Commons Attribution 2.5 License. However other material, including English text has all rights reserved.