How to create a box in CSS

Many websites consist of a wide variety of boxes making the knowledge to develop such boxes a real requirement for each and every web developer. Developing a box starts by creating an HTML element. In the below example we create a div with a class ‘ box’:

<div class="box"></div>

It’s now time to call up the div in the CSS and to assign a div height and width in order to display the div as a square and consequently create a box. To be perfectly clear we have added a border to the div which will clearly show you a square box when put to a test. This can be done thus:

.box{
width: 100px;
height: 100px;
border: 1px solid black;
}


Was this useful?