Four Simple Ways to Draw a Rectangle in HTML

Share this article

How to Draw a Rectangle in HTML

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:

FAQs on How to Draw a Rectangle in HTML

How Can I Draw a Rectangle Using HTML5 Canvas?

HTML5 introduced the canvas element, which can be used to draw graphics on a web page. To draw a rectangle using HTML5 canvas, you need to first create a canvas element in your HTML file. Then, you can use JavaScript to draw on the canvas. Here’s a simple example:

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

In this example, the fillRect() method is used to draw a rectangle. The parameters of fillRect() are (x, y, width, height), where x and y specify the position on the canvas (relative to the upper left corner) where the top-left corner of the rectangle will be placed.

How Can I Draw a Rectangle Using CSS?

CSS can be used to create a rectangle by specifying the width and height of an HTML element. Here’s a simple example:

<div class="rectangle"></div>

.rectangle {
width: 200px;
height: 100px;
background-color: #FF0000;
}

In this example, a div element is styled to have a specific width and height, and a background color. This creates a rectangle on the page.

How Can I Draw a Rectangle Using SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. To draw a rectangle using SVG, you can use the rect element. Here’s a simple example:

<svg width="400" height="180">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

In this example, the rect element is used to draw a rectangle. The width and height attributes define the size of the rectangle. The style attribute is used to define the color and stroke of the rectangle.

How Can I Draw a Rounded Rectangle Using CSS?

CSS provides the border-radius property, which can be used to create rounded corners for an element. Here’s a simple example:

<div class="rounded-rectangle"></div>

.rounded-rectangle {
width: 200px;
height: 100px;
background-color: #FF0000;
border-radius: 25px;
}

In this example, a div element is styled to have a specific width and height, a background color, and a border-radius. This creates a rectangle with rounded corners on the page.

How Can I Draw a Rectangle with a Border Using HTML and CSS?

CSS provides the border property, which can be used to add a border to an HTML element. Here’s a simple example:

<div class="rectangle-border"></div>

.rectangle-border {
width: 200px;
height: 100px;
background-color: #FF0000;
border: 2px solid black;
}

In this example, a div element is styled to have a specific width and height, a background color, and a border. This creates a rectangle with a border on the page.

Adam RobertsAdam Roberts
View Author

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.

Dianne PenaDianne Pena
View Author

Dianne is SitePoint's newsletter editor. She especiallly loves learning about JavaScript, CSS and frontend technologies.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form