This article teaches you how to play with CSS border

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

Recommend

Mini Program to Implement Paging Effect

This article example shares the specific code for...

MySQL Daemon failed to start error solution

MySQL Daemon failed to start error solution A few...

Vue simulates the shopping cart settlement function

This article example shares the specific code of ...

Detailed explanation of how to install centos7 using win10's built-in virtual machine hyper-v

1. Install the virtual machine hyper-v that comes...

Introduction to Linux environment variables and process address space

Table of contents Linux environment variables and...

Detailed steps to install mysql5.7.18 on Mac

1. Tools We need two tools now: MySQL server (mys...

Introduction to encryption of grub boot program in Linux

Table of contents 1. What is grub encryption 2. g...

vue+springboot realizes login verification code

This article example shares the specific code of ...

MySQL replication advantages and principles explained in detail

Replication is to transfer the DDL and DML operat...

jQuery implements Table paging effect

This article shares the specific code of jQuery t...

Three ways to refresh iframe

Copy code The code is as follows: <iframe src=...

Discuss the development trend of Baidu Encyclopedia UI

<br />The official version of Baidu Encyclop...

Detailed explanation of using Nginx reverse proxy to solve cross-domain problems

question In the previous article about cross-doma...

htm beginner notes (must read for beginners)

1. What is HTML HTML (HyperText Markup Language):...

JavaScript in-depth analysis of the direction of this and how to modify the direction

Table of contents this Method In the object Hidde...