@codeswithpankaj

CSS Borders

Welcome to the CSS Borders tutorial on codeswithpankaj.com. In this tutorial, we will explore various CSS border properties, including border-style, border-width, border-color, border-radius, and individual border sides (border-top, border-right, border-bottom, border-left).

CSS Border Properties

1. border-style

The border-style property specifies the style of the border. It can take one of the following values:

  • none: No border (default).

  • solid: A solid border.

  • dashed: A dashed border.

  • dotted: A dotted border.

  • double: A double border.

  • groove: A 3D grooved border.

  • ridge: A 3D ridged border.

  • inset: A 3D inset border.

  • outset: A 3D outset border.

Example:

p {
    border-style: solid;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Style - codeswithpankaj.com</title>
    <style>
        p {
            border-style: solid;
        }
    </style>
</head>
<body>
    <p>This paragraph has a solid border.</p>
</body>
</html>

2. border-width

The border-width property specifies the width of the border. It can take specific measurements (e.g., 2px, 0.5em) or predefined values (thin, medium, thick).

Example:

p {
    border-style: solid;
    border-width: 2px;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Width - codeswithpankaj.com</title>
    <style>
        p {
            border-style: solid;
            border-width: 2px;
        }
    </style>
</head>
<body>
    <p>This paragraph has a 2px solid border.</p>
</body>
</html>

3. border-color

The border-color property specifies the color of the border. It can take color names, HEX values, RGB values, RGBA values, HSL values, and HSLA values.

Example:

p {
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Color - codeswithpankaj.com</title>
    <style>
        p {
            border-style: solid;
            border-width: 2px;
            border-color: red;
        }
    </style>
</head>
<body>
    <p>This paragraph has a 2px solid red border.</p>
</body>
</html>

4. border-radius

The border-radius property specifies the radius of the border's corners. It can be used to create rounded corners.

Example:

p {
    border-style: solid;
    border-width: 2px;
    border-color: red;
    border-radius: 10px;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Radius - codeswithpankaj.com</title>
    <style>
        p {
            border-style: solid;
            border-width: 2px;
            border-color: red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <p>This paragraph has a 2px solid red border with rounded corners.</p>
</body>
</html>

5. Individual Border Sides

You can specify different border properties for each side of an element using border-top, border-right, border-bottom, and border-left.

Example:

p {
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid blue;
    border-left: 2px solid yellow;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Individual Border Sides - codeswithpankaj.com</title>
    <style>
        p {
            border-top: 2px solid red;
            border-right: 2px solid green;
            border-bottom: 2px solid blue;
            border-left: 2px solid yellow;
        }
    </style>
</head>
<body>
    <p>This paragraph has different colors for each side of the border.</p>
</body>
</html>

Conclusion

CSS border properties allow you to control the style, width, color, and radius of borders around HTML elements. By mastering these properties, you can create visually appealing and well-defined elements on your web pages. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

PreviousCSS BackgroundsNextCSS Margins

Last updated