How to create and style border using CSS ?

Last Updated : 15 May, 2023

The border property is used to create a border around an element and defines how it should look. There are three properties of the border.

border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following values are allowed.

dotted: A dotted border
dashed: A dashed border
solid: A solid 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.
none: A no border style
hidden: A hidden border.

Example: Here is a basic example of border-style property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>

<!-- Adding some CSS -->
<style>
    h1{
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;

        /* Border */
        border-style: dashed;
    }
</style>
<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output:

Similarly, we can use any style from the above-given list based on our choice. We can individually change the style of the bottom, left, right, and top of the border.

Example: In the above HTML code, just change the stylesheet of the border as given below.

border-bottom-style : dashed;
border-left-style: solid;
border-right-style: double;
border-top-style: dotted;

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
<!-- Adding some CSS -->
<style>
    h1 {
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;

        /* Border */
        border-bottom-style: dashed;
        border-left-style: solid;
        border-right-style: double;
        border-top-style: dotted;
    }
</style>

<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output:

border-width property: This property is used to define the width of all borders. The width can be of any size(in px, pt, cm, em, etc) or by using pre-defined values: thin, medium, or thick.

Example: Here is an example of the above-explained property.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>

<!-- Adding some CSS -->
<style>
    h1{
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;

        /* Border */
        border-style: solid;
        border-width: 5px;
    }
</style>
<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output :

border-color property: This property is used to change the color of all four borders. Change or add the following in the above HTML code in the style section.

Syntax:

border-color : green;
border-top-color: black;
border-bottom-color: yellow;

Example: Here we are using the above method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>

<!-- Adding some CSS -->
<style>
    h1 {
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;

        /* Border */
        border-style: solid;
        border-color: green;
        border-top-color: black;
        border-bottom-color: yellow;
    }
</style>

<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output:

Border Shorthand: We can define all the above properties in a single property, border.

Syntax :

border:  (border-width) (border-style) (border-color);

border: 5px dotted red;

Example: In this example, we are using the above method.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
<!-- Adding some CSS -->
<style>
    h1 {
        margin: auto;
        padding: 10px;
        color: green;
        margin-top: 220px;
        font-size: 48px;
        width: fit-content;

        /* Border */
        border: 5px dotted red;
    }
</style>

<body>
    <h1>GeeksForGeeks</h1>
</body>
</html>

Output:

Rounded borders: The border-radius property is used to add rounded borders. Change the above HTML code with the following syntax.

Syntax:

border: 5px solid red;
border-radius : 15px;

Example: Here we are using the above-explained method.