Div Border Style For HTML

What is a div? In HTML a div is used to group together other elements. This grouping allows a visual style (or position on the web page) to be applied to all elements of the div group easily. In modern responsive web development the div is a key page element. When using divs it can be useful to view its position on a page. Adding a border to the div achieves that. A border can also be used for decorative purposes. This brief article shows how easy it is to add a broder to a div. The article shows how to change the div border color (colour), width and padding.

Add a Border to a Div in HTML

In the following example HTML the two paragraphs are each in a div. The second div has a style attribute set to border:1px solid black; and the image shows the page loaded in a browser:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Simple Div Border Style Example</title>
    </head>
    <body>
        <div><p>Paragraph text in a no border div.</p></div>
        <div style="border:1px solid black;"><p>Paragraph text in a div with a border.</p></div>
    </body>
</html>

Div Border Style in Action

Change the thickness of the border by increasing the number of pixels (e.g. 5px), other web units can be used such as ems. Change the color, e.g. blue, or use color values, e.g. #0000FF. To put a gap between the text and border add a little padding. The following image shows a style setting of border:5px dashed #0000cc;padding-left:4px, by setting the color differently for each div it is possible to spot each div in a complex layout. Once the layout is finalised the div borders can be removed.

Div Border Dashed Style

Note a div border can affect the layout of the HTML elements contained within it, especially if the borders are thick. Remember that if you experience odd layout behaviour, especially for percentage based layouts.

Comments

On 3rd October at 13:51pm, Richard said: On this page you introduced an initial <div> element, with an inside <p></p>, and then a closing </div>. But what if I just want to put a border on a <div> and I do not want the <p></p> coding inside?

On 4th October at 17:05pm, Tek Eye said: The paragraph element (<p>) is not required, only required for completeness. I prefer all text content, and all content, to be contained in a relevant element, to help with styling options. If you remove the <p></p> tags the text no longer has the padding from the paragraph element and is pulled tighter to the div element.

Tek Eye

Div Border Style For HTML

Add a Border to a Div in HTML

Comments

See Also

Do you have a question or comment about this article?