Introduction to css box border style

高洛峰

Release： 2017-03-04 16:56:50

Original

2402 people have browsed it

Border styles include full border and single border styles. Different styles can be set for each side.

The following code P1 is the full border style, and P2 sets different styles for a single border:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css边框样式</title>
    <style>
        #p1{
            background: yellowgreen;
            border:4px dotted rebeccapurple;
            border-radius: 20px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
        }
        #p2{
            background: rebeccapurple;
            border:4px dashed skyblue;
            border-radius: 5px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
            border-bottom-color: palegreen;
            border-top-style: dotted;
        }
    </style>
</head>
<body>
<p id="p1">这是一段测试文字</p>
<p id="p2">这是一段测试文字</p>
</body>
</html>

Copy after login

For more articles related to css box border style, please pay attention to the PHP Chinese website!

Related labels：

css

source：php.cn

Previous article：How to make a star using CSS3 Next article：css text style and method of controlling the capitalization of text

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn