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

A brief talk about Mysql index and redis jump table

summary During the interview, when discussing abo...

Detailed explanation of commands to read and write remote files using Vim in Linux system

Set vim's working mode (temporary) :set (mode...

MySQL 8.0.25 installation and configuration tutorial under Linux

The latest tutorial for installing MySQL 8.0.25 o...

Method for realizing Internet interconnection by VMware virtual machine bridging

After installing VMware and creating a new virtua...

How to use anti-shake and throttling in Vue

Table of contents Preface concept Stabilization d...

A brief discussion on React native APP updates

Table of contents App Update Process Rough flow c...

Implementation example of Docker rocketmq deployment

Table of contents Preparation Deployment process ...

Implementation of Docker deployment of web projects

The previous article has installed the docker ser...

Specific method to delete mysql service

MySQL prompts the following error I went to "...

How to use webpack and rollup to package component libraries

Preface I made a loading style component before. ...

How to remove MySQL from Ubuntu and reinstall it

First delete mysql: sudo apt-get remove mysql-* T...

Mysql transaction concurrency problem solution

I encountered such a problem during development A...

Solutions to MySql crash and service failure to start

I have been in contact with PHP for so long, but ...

How to solve the problem of not finding the password after decompressing the MySQL free installation version

1. Unzip mysql-8.0.21-winx64 2. Configure environ...

HTML table cross-row and cross-column operations (rowspan, colspan)

Generally, the colspan attribute of the <td>...