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.

Previous: CSS background-image

Next: CSS Margins

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.

Terms Disclaimer About Us Contact Us