HTML CSS – Border Examples

0

Few examples demonstrating how to use CSS borders with different properties. These examples include various border styles, widths, colors, and effects, showing how you can control the borders of elements in your web page.

Example 1: Simple Border Around an Element

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Border Example</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            border: 5px solid #3498db; /* Solid blue border */
            padding: 20px;
            margin: 20px;
            background-color: #ecf0f1;
        }
    </style>
</head>
<body>
    <div>
        <h3>Simple Border Example</h3>
        <p>This div has a simple solid border around it.</p>
    </div>
</body>
</html>

Output:

  • A box with a 5px solid blue border (#3498db), padding, and background color applied.

Example 2: Dotted and Dashed Borders

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dotted and Dashed Border Example</title>
    <style>
        .dotted-border {
            width: 300px;
            height: 150px;
            border: 5px dotted green; /* Dotted green border */
            padding: 20px;
            background-color: #f9f9f9;
            margin: 20px;
        }

        .dashed-border {
            width: 300px;
            height: 150px;
            border: 5px dashed red; /* Dashed red border */
            padding: 20px;
            background-color: #f9f9f9;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="dotted-border">
        <h3>Dotted Border Example</h3>
        <p>This div has a dotted green border around it.</p>
    </div>

    <div class="dashed-border">
        <h3>Dashed Border Example</h3>
        <p>This div has a dashed red border around it.</p>
    </div>
</body>
</html>

Output:

  • One box with a dotted green border.
  • One box with a dashed red border.

Example 3: Rounded Corners (Border Radius)

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded Borders Example</title>
    <style>
        .rounded-border {
            width: 300px;
            height: 150px;
            border: 5px solid #8e44ad; /* Solid purple border */
            border-radius: 15px; /* Rounded corners */
            padding: 20px;
            background-color: #f4f4f4;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="rounded-border">
        <h3>Rounded Corners Border</h3>
        <p>This div has a solid purple border with rounded corners.</p>
    </div>
</body>
</html>

Output:

  • A box with rounded corners (border-radius: 15px) and a solid purple border.

Example 4: Border with Different Sides

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Different Borders on Each Side</title>
    <style>
        .border-sides {
            width: 300px;
            height: 150px;
            border-top: 5px solid #e74c3c; /* Red border on top */
            border-right: 5px dashed #2ecc71; /* Green dashed border on right */
            border-bottom: 5px dotted #f39c12; /* Yellow dotted border on bottom */
            border-left: 5px double #2980b9; /* Blue double border on left */
            padding: 20px;
            background-color: #ecf0f1;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="border-sides">
        <h3>Different Borders on Each Side</h3>
        <p>This div has different types of borders on each side.</p>
    </div>
</body>
</html>

Output:

  • Red solid border on the top, green dashed border on the right, yellow dotted border on the bottom, and blue double border on the left.

Example 5: Border with Box Shadow

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border with Box Shadow</title>
    <style>
        .box-shadow-border {
            width: 300px;
            height: 150px;
            border: 5px solid #16a085; /* Solid turquoise border */
            border-radius: 10px; /* Rounded corners */
            padding: 20px;
            background-color: #ecf0f1;
            margin: 20px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1); /* Box shadow */
        }
    </style>
</head>
<body>
    <div class="box-shadow-border">
        <h3>Border with Box Shadow</h3>
        <p>This div has a solid border and a box shadow to create depth.</p>
    </div>
</body>
</html>

Output:

  • A box with a solid turquoise border and a box shadow to give it depth, making it appear raised.

Example 6: Inset Border

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inset Border Example</title>
    <style>
        .inset-border {
            width: 300px;
            height: 150px;
            border: 5px inset #34495e; /* Inset border */
            padding: 20px;
            background-color: #bdc3c7;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="inset-border">
        <h3>Inset Border Example</h3>
        <p>This div has an inset border, making it appear indented.</p>
    </div>
</body>
</html>

Output:

  • A div with an inset border that makes the element appear indented, with a grayish blue color.

Example 7: Border Image

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Image Example</title>
    <style>
        .border-image {
            width: 300px;
            height: 150px;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 20px;
            border: 10px solid transparent;
            border-image: url('https://via.placeholder.com/50') 30 round; /* Border image */
        }
    </style>
</head>
<body>
    <div class="border-image">
        <h3>Border Image Example</h3>
        <p>This div has a custom border image applied around it.</p>
    </div>
</body>
</html>

Output:

  • A box with a border image applied around it. The image is taken from the URL provided and repeated with round property for tiling.

Summary of CSS Border Properties:

  • border: Sets the general border (style, width, and color).
  • border-style: Defines the border’s style (e.g., solid, dashed, dotted).
  • border-radius: Rounds the corners of the element’s border.
  • border-image: Allows you to use an image as a border.
  • box-shadow: Adds a shadow effect to the element, enhancing the border’s visual depth.

These examples demonstrate different ways to apply borders to HTML elements, from simple borders to advanced border effects like shadows and images.