How to make a rectangle in CSS

Learn how to create a rectangular shape in CSS with an example. Quickly create a box with rounded corners, borders, and background images.

Create a Rectangle in CSS

CSS allows us to create shapes of all kinds, including rectangles. Rectangles are very useful in design, and we can use them to create a variety of layouts, elements and components. In this tutorial, we will learn how to create a rectangle in CSS.

The first step is to create a <div> element, which will act as the container for our rectangle. We will also need to give it an ID which we can use to reference it later in our CSS:

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

Next, we need to add some CSS to our page to style the <div>. We will use the #rectangle selector to target our element, and then use the width and height properties to set the size of our rectangle:

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

Now that we have set the size of our rectangle, we can add some color using the background-color property. We can set the background color to any valid CSS color value:

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

Finally, we can add a border to our rectangle using the border property. We can set the border width, style and color to customize the look of our rectangle:

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #FF0000;
    border: 5px solid #000000;
}

And that's it! We have now created a simple rectangle using CSS. With some more styling, we can create a variety of shapes and designs.