This article teaches you how to play with CSS border

Border Style

The border-style property specifies what kind of border to display.

The border-style attribute is used to define the style of the border

The border-style value code demonstration:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Shuixiang Muyu's Blog</title>

    <style>
        p.none {
            border-style: none;
        }

        p.dotted {
            border-style: dotted;
        }

        p.dashed {
            border-style: dashed;
        }

        p.solid {
            border-style: solid;
        }

        p.double {
            border-style: double;
        }

        p.groove {
            border-style: groove;
        }

        p.ridge {
            border-style: ridge;
        }

        p.inset {
            border-style: inset;
        }

        p.outset {
            border-style: outset;
        }

        p.hidden {
            border-style: hidden;
        }
    </style>


</head>

<body>

    <div>
        <p class="none">No border. </p>
        <p class="dotted">Dotted border. </p>
        <p class="dashed">Dashed border. </p>
        <p class="solid">Solid border. </p>
        <p class="double">Double border. </p>
        <p class="groove"> Groove border. </p>
        <p class="ridge">Ridge border. </p>
        <p class="inset">Inset border. </p>
        <p class="outset">Outset border. </p>
        <p class="hidden">Hide border. </p>
    </div>
</body>

</html>

Effect demonstration:

Border Width

You can specify a width for the border using border-width property.

There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em (in units of px, pt, cm, em, etc.), or use one of the three keywords, thick, medium (the default), and thin.

Note: CSS does not define specific widths for the three keywords, so one user might set thick, medium, and thin to 5px, 3px, and 2px respectively, while another user might set them to 3px, 2px, and 1px respectively.

 p.one {
        border-style:solid;
        border-width:5px;
    }
    p.two {
        border-style:solid;
        border-width:medium;
    }

Border Color

The border-color property is used to set the color of the border. The colors that can be set are:

name - specifies the name of the color, such as "red"
RGB - specifies an RGB value, such as "rgb(255,0,0)"
Hex - specifies a hexadecimal value, such as "#ff0000"

You can also set the border color to "transparent".

Note: border-color alone does not work, you must first use border-style to set the border style.

  p.one{
        border-style:solid;
        border-color:red;
    }
    p.two {
        border-style:solid;
        border-color:#98bf21;
    }

Borders - set each side individually

In CSS, you can specify different borders for different sides:

p {
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
    }

The above example can also set a single property:

Examples

border-style:dotted solid;

The border-style property can have 1-4 values:

border-style:dotted solid double dashed;

The top border is dotted
The right border is solid
The bottom border is double
The left border is dashed

border-style:dotted solid double;

The top border is dotted
The left and right borders are solid
The bottom border is double

border-style:dotted solid;

The top and bottom borders are dotted
The right and left borders are solid

border-style:dotted;

The four sides border is dotted

The example above uses border-style. However, it can also be used together with border-width and border-color.

Border - Shorthand Properties The above example uses a number of properties to set the border.

You can also set the border in a property.

You can set it in the "border" property:

border-width
border-style (required)
border-color

    border:5px solid red;

This is the end of this article about teaching you how to use CSS border. For more CSS border content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Color matching techniques and effect display for beauty and styling websites

>>: MySQL should never write update statements like this