CSS Borders

CSS borders are used to define the edges of HTML elements, and they can be customized in various ways. Here’s a breakdown of the main properties and some examples:

Basic Border Properties

border: A shorthand property to set the width, style, and color of the border in one line.
```
.box {
  border: 2px solid black; /* 2px width, solid style, black color */
}
```
border-width: Sets the width of the border. It can be thin, medium, thick, or a specific length value.
```
.box {
  border-width: 5px; /* Sets border width to 5 pixels */
}
```
border-style: Defines the style of the border. Common values include solid, dotted, dashed, double, groove, ridge, inset, outset, and none.
```
.box {
  border-style: dashed; /* Border is dashed */
}
```
border-color: Specifies the color of the border. It can be a color name, hex code, RGB, RGBA, HSL, or HSLA value.
```
.box {
  border-color: red; /* Sets border color to red */
}
```

Example

Here's a complete example that combines these properties:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      border-width: 3px;
      border-style: solid;
      border-color: blue;
      padding: 20px;
      margin: 20px;
    }

    .dashed-box {
      border-width: 5px;
      border-style: dashed;
      border-color: green;
    }

    .dotted-box {
      border: 4px dotted red;
    }
  </style>
</head>
<body>
  <div class="box">Solid Blue Border</div>
  <div class="dashed-box">Dashed Green Border</div>
  <div class="dotted-box">Dotted Red Border</div>
</body>
</html>

Border Radius

To create rounded corners, use the border-radius property:

.rounded-box {
  border: 2px solid black;
  border-radius: 10px; /* Rounds the corners with a 10px radius */
}

Border Shorthand

You can also use the shorthand property to set all border properties at once:

.box {
  border: 1px solid black; /* 1px width, solid style, black color */
}

This shorthand allows you to set border-width, border-style, and border-color in one line.

Example with Different Border Radius

<!DOCTYPE html>
<html>
<head>
  <style>
    .rounded-box {
      border: 3px solid blue;
      border-radius: 15px; /* More rounded corners */
      padding: 20px;
      margin: 20px;
    }

    .circle-box {
      border: 2px solid red;
      border-radius: 50%; /* Makes the box circular */
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="rounded-box">Rounded Corners</div>
  <div class="circle-box"></div> <!-- Circular Box -->
</body>
</html>

This example demonstrates the border-radius property to create different border shapes, including circular borders.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us