Skip to main content

How to Draw a Rectangle in HTML

By Adam Roberts

HTML & CSS

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

If, for whatever reason, you sometimes feel like creating a rectangle using html/css, the below code is the easiest way to do so. A given rectangle can also be decorated using tags like background-color.

Here’s the code:

<div style="width:500px;height:100px;border:1px solid #000;">This is a rectangle!</div>

And here’s the result:

This is a rectangle!

There you go: no fuss, no muss.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!