Four Simple Ways 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.

Key Takeaways

Four basic ways to draw a shape on the Web are via HTML and CSS, with CSS alone, with SVG, and with the HTML canvas element.
HTML and CSS can be used to create simple shapes like rectangles and circles, while CSS alone can create shapes using pseudo-elements like ::before or ::after. SVG allows for more sophisticated shapes, and the HTML canvas element can be used to create graphics and interactive features.
The method chosen for drawing a shape in HTML depends on the desired outcome. HTML and CSS are ideal for creating content containers and decorative elements, CSS pseudo-elements are useful for adding decorative flourishes and tooltips, SVG is great for lightweight, responsive shapes, and the HTML canvas element is powerful for creating graphics and interactive features but requires a good understanding of JavaScript.

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.

See the Pen
Creating Simple Shapes: HTML and CSS1 by SitePoint (@SitePoint)
on CodePen.

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%;
}

See the Pen
Creating Simple Shapes: HTML and CSS2 by SitePoint (@SitePoint)
on CodePen.

We can also draw an ellipse:

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

See the Pen
Creating Simple Shapes: HTML and CSS3 by SitePoint (@SitePoint)
on CodePen.

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%;
}

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

Further reading:

Learn more about how to use the border-radius property.

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:

You can learn more about ::before and ::after in our guide to CSS pseudo-elements.

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:

Learn more about SVG in What Is SVG? Your Guide to SVG Files.
You can read more about working with SVG on MDN.

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:

Read about the canvas element on MDN.
Read our article on Canvas vs SVG: Choosing the Right Tool for the Job.

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:

Introducing the CSS clip-path Property, which shows how to animate our shapes.
Squeaky Portraits: Having Fun with the CSS path() Function, which shows how to use clip-path with SVGs.

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.