CSS Border

The CSS border property allows you to define the border around an element. You can customize its width, style, and color.

Basic Border Properties

  1. border: A shorthand property to set the width, style, and color of all four borders. 
    div {
  border: 2px solid black;
}

    Try It Now

  2. border-width: Specifies the width of the border.
    • Values: thin, medium, thick, or specific units like px, em, etc. 
      div {
  border-width: 5px;
}

      Try It Now

  3. border-style: Specifies the style of the border.
    • Values: none, solid, dashed, dotted, double, groove, ridge, inset, outset. 
      div {
  border-style: dashed;
}

      Try It Now

  4. border-color: Specifies the color of the border. 
    div {
  border-color: red;
}

    Try It Now

Individual Border Properties

You can set borders individually for each side using the following properties:

  1. border-top: Applies to the top border. 
    div {
  border-top: 2px solid blue;
}

    Try It Now

  2. border-right: Applies to the right border. 
    div {
  border-right: 2px solid green;
}

    Try It Now

  3. border-bottom: Applies to the bottom border. 
    div {
  border-bottom: 2px solid yellow;
}

    Try It Now

  4. border-left: Applies to the left border. 
    div {
  border-left: 2px solid pink;
}

    Try It Now

Shorthand Property Example

You can combine multiple border properties into a single shorthand property:

div {
  border: 4px dotted red;
}

Try It Now

Additional Border Properties

  1. border-radius: Defines the rounded corners of an element’s border. 
    div {
  border: 2px solid black;
  border-radius: 15px;
}

    Try It Now

  2. border-image: Specifies an image to be used as the border. 
    div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch;
}

    Try It Now

  3. border-collapse: Specifies whether table borders should collapse into a single border or be separated. 
    table {
  border-collapse: collapse;
}

    Try It Now

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 3px solid #000;
      border-radius: 10px;
      background-color: lightblue;
    }

    .rounded {
      border: 2px dashed #ff5733;
      border-radius: 25px;
    }
  </style>
  <title>CSS Border Example</title>
</head>
<body>

<div class="box">This is a box with a solid border.</div>
<br>
<div class="box rounded">This box has a dashed border and rounded corners.</div>

</body>
</html>

Try It Now

Explanation:

  • .box { ... }: Defines a box with a solid black border, rounded corners, and a light blue background.
  • .rounded { ... }: Adds a dashed orange border and increases the corner radius, giving the element a softer, rounded appearance.

This example illustrates how to use CSS border properties to style elements effectively, adding visual interest and structure to web pages.