What is Border in CSS?

CSSmarkup~5 mins

Border in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Borders help you add lines around elements to make them stand out or separate them visually.

To highlight a button or clickable area on a webpage.

To separate sections or boxes on a page clearly.

To create frames around images or text blocks.

To add decorative lines around content for style.

To show focus or selection on form inputs.

Syntax

CSS

selector {
  border: <border-width> <border-style> <border-color>;
}

The border property is a shortcut for setting width, style, and color all at once.

Common border styles include solid, dashed, and dotted.

Examples

This adds a solid black border 2 pixels thick around a <div>.

CSS

div {
  border: 2px solid black;
}

This adds a dashed blue border 1 rem thick around a paragraph.

CSS

p {
  border: 1rem dashed blue;
}

This adds a red dotted border 5 pixels thick around an image.

CSS

img {
  border: 5px dotted red;
}

Sample Program

This example shows a green solid border around a box with text centered inside. The border is 3 pixels thick.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Border Example</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 3px solid #4CAF50;
      padding: 1rem;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
      text-align: center;
      line-height: 100px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="box">This box has a green border</div>
</body>
</html>

OutputSuccess

Important Notes

You can set borders on each side separately using border-top, border-right, border-bottom, and border-left.

If you only set border style or color without width, the border may not show.

Use colors with good contrast to keep borders visible and accessible.

Summary

Borders add lines around elements to separate or highlight them.

Use the border shorthand to set width, style, and color in one line.

Common styles are solid, dashed, and dotted.