CSS Border

What is a Border?

A border is a line that surrounds an HTML element. A border sits between padding (on the inside) and margin (on the outside). A border can be controlled through three main aspects: style, width, and color.

Borders are used as:
- Visual separators between elements
- Emphasis on specific elements
- Decorative elements such as cards, buttons, or avatars
- Status indicators (active, error, success)

Border Properties

CSS provides various properties to control borders, both granularly and with shorthand.

Border Style

border-style determines the type of border line:

Border Width

border-width determines the thickness of the border. The value can be a length (px, em, rem) or a keyword (thin, medium, thick).

Border Color

border-color determines the color of the border. It accepts all CSS color formats: named colors, hex, RGB, HSL, and so on.

Border Shorthand

The border property is a shorthand that combines width, style, and color in a single declaration:

border: [width] [style] [color];
/* Example: border: 2px solid #333; */

Individual Borders

CSS allows setting borders per side:
- border-top
- border-right
- border-bottom
- border-left

And also per property, per side:
- border-top-width, border-top-style, border-top-color
- border-right-width, border-right-style, border-right-color
- etc.

Border Radius

border-radius makes border corners rounded. It accepts one to four values for each corner.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Border</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
      color: #333;
    }

    h1 {
      margin-bottom: 25px;
    }

    .section {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    h2 {
      margin-bottom: 15px;
      color: #2c3e50;
    }

    /* === Border Style === */
    .style-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 15px;
    }

    .style-box {
      padding: 15px;
      text-align: center;
      font-size: 13px;
      font-weight: bold;
      border-width: 3px;
    }

    .style-solid { border: 3px solid #333; }
    .style-dashed { border: 3px dashed #e74c3c; }
    .style-dotted { border: 3px dotted #3498db; }
    .style-double { border: 4px double #2ecc71; }
    .style-groove { border: 4px groove #9b59b6; }
    .style-ridge { border: 4px ridge #e67e22; }
    .style-inset { border: 4px inset #1abc9c; }
    .style-outset { border: 4px outset #e74c3c; }

    /* === Individual Borders === */
    .individual-box {
      width: 200px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: bold;
      border-top: 4px solid #e74c3c;
      border-right: 4px dashed #3498db;
      border-bottom: 4px dotted #2ecc71;
      border-left: 4px double #f39c12;
    }

    /* === Border Radius === */
    .radius-grid {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: flex-end;
    }

    .radius-box {
      width: 100px;
      height: 100px;
      background-color: #ecf0f1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      color: #555;
      border: 2px solid #34495e;
    }

    .radius-10 { border-radius: 10px; }
    .radius-20 { border-radius: 20px; }
    .radius-50 { border-radius: 50px; }
    .radius-circle { border-radius: 50%; }

    /* === Card with Border === */
    .card {
      border: 2px solid #ddd;
      border-radius: 12px;
      padding: 20px;
      max-width: 300px;
      background-color: white;
    }

    .card-success {
      border-color: #2ecc71;
      background-color: #f0fff4;
    }

    .card-warning {
      border-color: #f39c12;
      background-color: #fffde7;
    }

    .card-error {
      border-color: #e74c3c;
      background-color: #fff5f5;
    }

    .card h3 {
      margin-bottom: 8px;
    }

    .card p {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    /* === Button with Border === */
    .btn {
      padding: 10px 24px;
      font-size: 14px;
      font-weight: bold;
      border: 2px solid;
      border-radius: 6px;
      cursor: pointer;
      margin: 5px;
      background-color: transparent;
    }

    .btn-primary {
      border-color: #3498db;
      color: #3498db;
    }

    .btn-success {
      border-color: #2ecc71;
      color: #2ecc71;
    }

    .btn-danger {
      border-color: #e74c3c;
      color: #e74c3c;
    }

    .btn-rounded {
      border-radius: 50px;
    }

    /* === Avatar === */
    .avatar-grid {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #3498db;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 20px;
    }

    .avatar-thin {
      border: 2px solid #3498db;
      background-color: transparent;
      color: #3498db;
    }

    .avatar-thick {
      border: 4px solid #2ecc71;
    }

    .avatar-dashed {
      border: 3px dashed #e74c3c;
      background-color: transparent;
      color: #e74c3c;
    }

    .label {
      font-size: 12px;
      color: #888;
      text-align: center;
      margin-top: 5px;
    }

    .section p {
      margin-bottom: 12px;
      color: #555;
      line-height: 1.6;
    }
  </style>
</head>
<body>

  <h1>CSS Border</h1>

  <!-- Border Style -->
  <div class="section">
    <h2>Border Style Types</h2>
    <p>There are 8 types of border styles available in CSS:</p>
    <div class="style-grid">
      <div class="style-box style-solid">solid</div>
      <div class="style-box style-dashed">dashed</div>
      <div class="style-box style-dotted">dotted</div>
      <div class="style-box style-double">double</div>
      <div class="style-box style-groove">groove</div>
      <div class="style-box style-ridge">ridge</div>
      <div class="style-box style-inset">inset</div>
      <div class="style-box style-outset">outset</div>
    </div>
  </div>

  <!-- Individual Borders -->
  <div class="section">
    <h2>Individual Border per Side</h2>
    <p>Each side can have a different style and color:</p>
    <div class="individual-box">
      Top: solid<br>
      Right: dashed<br>
      Bottom: dotted<br>
      Left: double
    </div>
  </div>

  <!-- Border Radius -->
  <div class="section">
    <h2>Border Radius (Sudut Bulat)</h2>
    <p>The border-radius property rounds element corners:</p>
    <div class="radius-grid">
      <div>
        <div class="radius-box radius-10">10px</div>
        <div class="label">border-radius: 10px</div>
      </div>
      <div>
        <div class="radius-box radius-20">20px</div>
        <div class="label">border-radius: 20px</div>
      </div>
      <div>
        <div class="radius-box radius-50">50px</div>
        <div class="label">border-radius: 50px</div>
      </div>
      <div>
        <div class="radius-box radius-circle">50%</div>
        <div class="label">border-radius: 50%</div>
      </div>
    </div>
  </div>

  <!-- Cards -->
  <div class="section">
    <h2>Usage Example on a Card</h2>
    <p>Borders are often used to indicate success, warning, or error status:</p>
    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
      <div class="card card-success">
        <h3 style="color: #2ecc71;">Success!</h3>
        <p>Your data has been saved to the database.</p>
      </div>
      <div class="card card-warning">
        <h3 style="color: #f39c12;">Peringatan!</h3>
        <p>Storage server is almost at full capacity.</p>
      </div>
      <div class="card card-error">
        <h3 style="color: #e74c3c;">Failed!</h3>
        <p>The connection to the server was lost. Try again later.</p>
      </div>
    </div>
  </div>

  <!-- Buttons -->
  <div class="section">
    <h2>Button with a Border</h2>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-primary btn-rounded">Rounded</button>
  </div>

  <!-- Avatars -->
  <div class="section">
    <h2>Avatar with a Border</h2>
    <div class="avatar-grid">
      <div>
        <div class="avatar">A</div>
        <div class="label">Default</div>
      </div>
      <div>
        <div class="avatar avatar-thin">B</div>
        <div class="label">Thin border</div>
      </div>
      <div>
        <div class="avatar avatar-thick">C</div>
        <div class="label">Thick border</div>
      </div>
      <div>
        <div class="avatar avatar-dashed">D</div>
        <div class="label">Dashed border</div>
      </div>
    </div>
  </div>

</body>
</html>

Code Explanation

1. Border Style Grid — Eight boxes, each displaying a different border-style: solid, dashed, dotted, double, groove, ridge, inset, and outset. Each type produces a unique visual effect.

2. Individual Borders — A box whose four sides each have a different border style. This is useful when you want to highlight a specific side, for example a border-bottom as a section separator.

3. Border Radius — Four boxes with different border-radius values: 10px (slightly rounded corners), 20px (fairly rounded corners), 50px (very rounded corners), and 50% (creates a perfect circle from a square box).

4. Status Cards — Cards with colored borders to indicate status: green for success, yellow for warning, red for error. Padding and background are also adjusted to match the status color.

5. Buttons — Outline buttons that use the border as the main design element, with background-color: transparent and a different border color for each variant.

6. Avatars — Circles (border-radius: 50%) with various border variations: default, thin, thick, and dashed.

Everyday Use Cases

In real web design, borders are used for many purposes:

Form input with validation:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .form-group {
      margin-bottom: 15px;
      font-family: Arial, sans-serif;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }

    input {
      width: 100%;
      padding: 10px 12px;
      font-size: 14px;
      border: 2px solid #ccc;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.3s;
    }

    input:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    input.valid {
      border-color: #2ecc71;
    }

    input.invalid {
      border-color: #e74c3c;
    }

    .message {
      font-size: 12px;
      margin-top: 4px;
    }

    .message.success { color: #2ecc71; }
    .message.error { color: #e74c3c; }
  </style>
</head>
<body>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" class="valid" value="[email protected]">
    <div class="message success">Email valid</div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" class="invalid" value="123">
    <div class="message error">Password at least 8 characters</div>
  </div>
</body>
</html>

In the form example above:
- Default border (#ccc) — The normal state of the input
- Focus border (#3498db) — When the input is active/clicked, the border turns blue with a glow effect
- Valid border (#2ecc71) — A valid input is marked with a green border
- Invalid border (#e74c3c) — An invalid input is marked with a red border

Conclusion

• A border has three main properties: border-style, border-width, and border-color.
• Use the shorthand border: 2px solid #333; for code efficiency.
• border-radius rounds corners — 50% creates a perfect circle from a square box.
• Individual borders (border-top, border-right, etc.) allow different styles per side.
• Borders are very useful for indicating status (valid/invalid, success/error) and as decorative elements on cards, buttons, and avatars.