Creating borders and space with CSS: We can also use CSS properties to create borders and space around our HTML elements. To create a border around a HTML element, you have to use the border CSS property and set the values to the width, style and colour you want. Let’s look at an example:

<body>
 <div style="border: 4px solid green; width: 50%; height: 100px;"> <!--Here we are using border property, width, style and color. -->
 Hello World. Writting webpages can be fun.
 </div>
</body>

Sample output of above code:


Hello World. Writting webpages can be fun.

 

We can also change how much space there is inside a HTML element by using the padding and margin CSS properties. You can set the values for the margin and padding at the top, bottom, left and right of a HTML element. Let’s take a look:

 

<body>
 <div style="padding: 10px; margin: 50px; border: 4px solid blue;
 width: 50%; height: 100px;">
 Hello World. I am learning<br/>
 about CSS padding, margins, and borders.
 </div>
</body>

Sample output of above code:

Hello World. I am learning
about CSS padding, margins, and borders.

 

Here the padding CSS property creates 10px of space between the border of our < div > and the text inside the < div >. The margin CSS property creates 50px of space between the border of our < div > and the edge of the page.

The style of our border has been set to the value of solid. You can also use dotted, dashed or double as values. Below is an example of dotted border.

<body>
 <div style="padding: 10px; margin: 50px; border: 4px dotted blue;
 width: 50%; height: 100px;">
 Hello World. I am learning<br/>
 about CSS padding, margins, and borders.
 </div>
</body>

Sample output of above code: dotted border

Hello World. I am learning
about CSS padding, margins, and borders.

Related Posts: (Learn More)

W3SCHOOLS – CSS border spacing property.