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>