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.