Prev Next

CSS Border Sides

You can control which sides of an element have borders. Instead of applying a border to all sides, use properties like border-top, border-right, border-bottom, and border-left to target specific edges. This helps create subtle dividers or underline effects without boxing the entire element.

Key Topics

Selecting Specific Sides

For example, border-bottom: 2px solid #000; applies a border only to the bottom of the element. This technique can mimic underlines or separate sections without a full box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Border Sides Example</title>
    <style>
        h2 {
            border-bottom: 2px solid #333;
            padding-bottom: 5px;
            font-family: Arial, sans-serif;
        }
        p {
            border-left: 4px solid #FF5733;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <h2>Underlined Heading</h2>
    <p>This paragraph has a left border, adding a visual guideline and emphasis.</p>
</body>
</html>

Explanation: A bottom border on the heading acts like an underline, while a left border on the paragraph creates a visual marker. Targeting sides selectively offers design flexibility.

Creative Effects

Combining different sides and colors can create interesting effects, such as boxes that appear to float or sections that visually connect to each other.

Key Takeaways

  • Precision: Apply borders only where needed.
  • Styling Options: Underlines, side markers, and dividers are easy to achieve.
  • Flexibility: Mix and match sides for custom effects.
Prev Next