Tek Eye Logo

Tek Eye

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">
        <meta charset="utf-8" />
        <title>Simple Div Border Style Example</title>
        <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>

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.

Author:  Published:  

ShareSubmit to TwitterSubmit to FacebookSubmit to LinkedInSubmit to redditPrint Page

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Articles on:

Android Programming and Android Practice Projects, HTML, VPS, Computing, IT, Computer History, ↓markdown↓ CMS, C# Programming, Using Windows for Programming

Free Android Projects and Samples:

Android Examples, Android List Examples, Android UI Examples

Maintain your PC with Piriform

Shop at Tek Eye for PC utilities