Date: 2015dec23
Date: 2025jun30
Language: html
Q. HTML: make a nice looking box in html with no framework
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>
* {
font-family: sans-serif;
}
.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>
Looks like this:
