how to draw a rectangle in HTML or CSS?

Question

I am trying to draw a rectangle and I found the website for css code(http://css-tricks.com/examples/ShapesOfCSS/). How do I put together in HTML? In other words, how do I define #rectangle in HTML.

Facebook always has blue rectangle at the top of each page. What is the best way to achieve like them?

I appreciate if someone could help me.

Answer 1

Fiddle

HTML

<div id="rectangle"></div>

CSS

#rectangle{
    width:200px;
    height:100px;
    background:blue;
}

I strongly suggest you read about CSS selectors and the basics of HTML.

Answer 2

Use <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>

This will create a blue rectangle.

Answer 3

SVG

Would recommend using svg for graphical elements. While using css to style your elements.

#box {
  fill: orange;
  stroke: black;
}

<svg>
  <rect id="box" x="0" y="0" width="50" height="50"/>
</svg>

Answer 4

I do the following in my eBay listings:

<p style="border:solid thick darkblue; border-radius: 1em; 
          border-width:3px; padding-left:9px; padding-top:6px; 
          padding-bottom:6px; margin:2px; width:980px;">

This produces a box border with rounded corners.You can play with the variables.