CSS border

CSS border property is a shorthand to specify border width, style, and color.

The syntax to specify border is

</>
Copy
border: border-width border-style border-color;

where

PropertyMandatory/
Optional		Examples
border-widthOptional1px, 2em
border-styleMandatorysolid, dotted, double
border-colorOptional#555, red, #55fffcdd

Examples

border: border-width border-style border-color

In the following example, we set a border for <h1> element, with border-width of 5px, border-style of solid, and border-color of red.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border: border-width border-style

In the following example, we set a border for <h1> element, with border-width of 5px, and border-style of solid. We do not specify any border-color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: 5px solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

border: border-style

In the following example, we set a border for <h1> element, with border-style of solid. We do not specify any width and color for the border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            border: solid;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border property, and how to use this property for HTML Elements, with examples.