HTML & CSS

Four Simple Ways to Draw a Rectangle in HTML

Adam Roberts, Dianne Pena
Share

In this article, we’ll look at four basic ways to draw a shape on the Web: via HTML and CSS, with CSS alone, with SVG, and with the HTML canvas element.

Table of Contents
  1. Draw a Rectangle with HTML and CSS
  2. How to Draw a Rectangle with CSS Alone
  3. How to Draw a Rectangle with SVG
  4. How to Create a Rectangle with the HTML canvas Element
  5. Wrapping Up

Draw a Rectangle with HTML and CSS

Creating a shape with HTML and CSS is very easy. We can take an element such as a div, give it a width and height, maybe a border and/or a background color, and we’re done:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

The Pen below shows the result.

Note: in the example above, the div is centered using CSS Grid.

We can, of course, place content within that rectangle if we wish. Give it a try in the Pen above.

We can also draw other shapes like circles with the help of the border-radius property:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

We can also draw an ellipse:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

We can even play around with weirder shapes, like this:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #ed21f3;
  background-color: #f7f7f7;
  border-radius: 50% 25%;
}

Further reading:

How to Draw a Rectangle with CSS Alone

In our examples above, we used an HTML element to create our shape. Now let’s use just CSS.

To do so, we’ll make use of the CSS ::before pseudo-element. (We could use ::after instead.)

Here’s what we can do:

body::before {
  content: '';
  width: 500px;
  height: 200px;
  border: 10px solid #21f348;
  background-color: #f7f7f7;
}

See the Pen
Creating Simple Shapes: CSS only by SitePoint (@SitePoint)
on CodePen.

We are creating a pseudo-element that’s attached to the <body> element, and then setting styles for it, just as we did for our div above.

We can also add content to this shape by placing words, images, and more between the quotes of the content property, such as content: 'This is some content!'.

Further reading:

How to Draw a Rectangle with SVG

SVG allows us to create very sophisticated shapes within our HTML. Here’s a simple example of how to create a rectangle:

<svg>
  <rect x="5" y="5" width="500" height="200" />
</svg>

Here’s our CSS:

svg {
  width: 510px;
  height: 210px;
  fill: #f7f7f7;
  stroke-width: 10px; 
  stroke: #f32121;
}

See the Pen
Creating Simple Shapes: SVG by SitePoint (@SitePoint)
on CodePen.

Further reading:

How to Create a Rectangle with the HTML canvas Element

We can also create shapes using the HTML canvas element. We firstly create a canvas element and set a width and height in the HTML:

<canvas width="520" height="220"></canvas>

Then we add the following JavaScript:

let canvas = document.querySelector('canvas');
let demo = canvas.getContext('2d');

demo.rect(10, 10, 500, 200);
demo.fillStyle = '#f7f7f7';
demo.strokeStyle = '#f321ec';
demo.lineWidth = 10;
demo.fill();
demo.stroke();

The Pen below shows the result.

See the Pen
Creating Simple Shapes: canvas by SitePoint (@SitePoint)
on CodePen.

Further reading:

Wrapping Up

In this article, we’ve looked at four simple ways to draw a shape in HTML. Which one we should use depends on what we’re trying to achieve.

Drawing shapes in HTML and styling them with CSS is very common, and is ideal when creating containers for content on HTML pages. These styled elements can also be used for decorative purposes. (Check out CodePen for thousands of creative ways to use HTML and CSS to create amazing artwork.)

Creating shapes with CSS pseudo-elements is very handy for adding decorative flourishes to a web page, and for useful things like tooltips.

SVG is an excellent tool for creating lightweight, responsive shapes on a web page. The SVG code can be embedded within our HTML pages, or we can link to SVG files just like we link to images and embed them on a page that way.

The <canvas> element is a super powerful platform for creating all sorts of graphics and other interactive features on a web page, but it usually involves a fairly deep understanding of JavaScript.

Lastly, if you want to take creating shapes in HTML to the next level, also check out these amazing examples of using CSS clip-path: