Current Location：How HTML > HTML Articles > Content

HTML Div Border

HTML Div Border

In HTML, the <div> element is a block-level container used to group and style content. One common styling property applied to <div> elements is the border. Borders can be used to separate content, define boundaries, and add visual interest to a web page.

Basic Border

You can add a basic border to a <div> element using the CSS border property. The border property can accept three values: width, style, and color. Here is an example of adding a solid black border with a width of 1px to a <div> element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a solid black border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Width

The width of a border can be specified using different units like px, em, or rem. Here is an example of setting the border width of a <div> element to 2 pixels:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a 2px solid black border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Style

The style of a border can be customized using values like dashed, dotted, or double. Here is an example of setting a <div> element’s border style to dashed:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px dashed black;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a dashed black border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Color

You can specify the color of a border using color names, hex codes, RGB values, or HSL values. Here is an example of setting the border color of a <div> element to red:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a solid red border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Shorthand

The border property allows you to specify the width, style, and color of a border in one line of code. Here is an example of using the border shorthand property to create a blue double border with a width of 3px:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 3px double blue;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a blue double border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Radius

The border-radius property can be used to create rounded corners for a <div> element. It can accept values in pixels or percentages. Here is an example of applying a border radius of 10px to a <div> element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px solid black;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has rounded corners with a border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Collapse

When you have multiple <div> elements with borders, the border-collapse property controls how the borders interact with each other. The border-collapse property can have two values: collapse or separate. Here is an example of collapsing the borders of two <div> elements:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="border-example">Div 1</div>
  <div class="border-example">Div 2</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Image

You can use the border-image property to create borders with images instead of solid colors. The border-image property takes the URL of the image and nine parameters that define how the image is sliced and repeated. Here is an example of applying a border image to a <div> element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 10px solid transparent;
      border-image: url('border-image.png') 30 round;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a border image</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Gradient

You can also create borders using gradient colors. This can be achieved using linear gradients or radial gradients in the border-image property. Here is an example of creating a border with a linear gradient:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 5px solid;
      border-image: linear-gradient(to right, red, blue) 1;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a border with a linear gradient</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Style Individual Sides

You can apply different border styles to individual sides of a <div> element using the properties border-top, border-right, border-bottom, and border-left. Here is an example of setting different border styles for each side:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border-top: 2px dotted black;
      border-right: 3px double red;
      border-bottom: 1px solid blue;
      border-left: 4px dashed green;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has different border styles on each side</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Box Model

When working with borders on <div> elements, it’s important to remember the CSS box model. The box model consists of content, padding, border, and margin. The total width and height of a <div> element are calculated by adding the content width and height to the padding, border, and margin. Here is an example demonstrating the box model:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      width: 200px;
      height: 100px;
      border: 5px solid black;
      padding: 10px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="border-example">This div demonstrates the CSS box model</div>
</body>
</html>
HTML

Output:

HTML Div Border

Responsive Border

You can create responsive borders by using percentage values for border widths and styles. This allows the borders to adjust dynamically based on the size of the viewport. Here is an example of making a border responsive:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2% dashed black;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a responsive dashed black border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Nested Borders

When nesting <div> elements, you can create borders that appear to be inside each other by applying different border styles and colors. Here is an example of nested borders:

<!DOCTYPE html>
<html>
<head>
  <style>
    .outer-border {
      border: 3px solid black;
      padding: 10px;
    }

    .inner-border {
      border: 2px dashed red;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="outer-border">
    Outer Border
    <div class="inner-border">Inner Border</div>
  </div>
</body>
</html>
HTML

Output:

HTML Div Border

Transparent Border

You can create a border that is transparent by setting the border color to transparent. This can be useful for creating effects where only the border’s

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2px dashed transparent;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a transparent dashed border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Collapse Example

Here is another example demonstrating the border-collapse property when applied to a table:

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</body>
</html>
HTML

Output:

HTML Div Border

Multiple Borders

You can create multiple borders on a <div> element by stacking them using the box-shadow property. Here is an example of creating two borders on a <div> element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2px solid black;
      padding: 10px;
      box-shadow: 0 0 0 5px red, 0 0 0 10px blue;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has multiple borders</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border Radius Individual Corners

You can apply different border radii to individual corners of a <div> element using the border-radius property with specific values. Here is an example of creating a <div> element with rounded top corners only:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 1px solid black;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has rounded top corners</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border with Text

Borders can also be applied to text within a <div> element. Here is an example of adding a border around text:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="border-example">This text has a border</div>
</body>
</html>
HTML

Output:

HTML Div Border

Border with Background

When applying borders to a <div> element with a background color, the border will be visible around the content and padding of the <div>. Here is an example of adding a border to a <div> with a background color:

<!DOCTYPE html>
<html>
<head>
  <style>
    .border-example {
      border: 2px dashed black;
      padding: 10px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="border-example">This div has a border over a background color</div>
</body>
</html>
HTML

Output:

HTML Div Border

These are just a few examples of how you can style borders on <div> elements in HTML. By experimenting with different border properties, styles, and effects, you can create visually appealing and well-defined sections on your web page.

Like(0)

HTML Articles