How can i draw a box using css like the answer box in stackoverflow?

Question

How can i draw a box in css? I want a box like the green one used to display the number of answers to a question in stackoverflow?

Answer 1

Use any element – e.g. a div, make sure it's displayed as a block-level element (i.e. display: block) and give it a border.

.box { border: 1px solid #088; font-size: 4em; }

<div class="box">6</div>

Works well.

Answer 2

CSS:

.answerbox
{
height: 150px; /*Specify Height*/
width:  150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}

HTML: <div class="answerbox">4 <br /> Answers</div>

Answer 3

Use Firebug and the "Inspect" function; point at the answer box here on SO and rip the HTML and CSS from the Firebug console.

Answer 4

this page: http://www.w3.org/TR/CSS2/box.html

was the first page found by doing a Google search for "css box"

Answer 5

You can also use the AIS Accessibility Toolbar - http://www.visionaustralia.org.au/ais/toolbar/ - to expose the css used for the site amongst a whole host of other stuff.