What are the css properties for rounded borders?-CSS Knowledge-php.cn

Home

Daily Programming

CSS Knowledge

What are the css properties for rounded borders?

Jun 12, 2020 pm 03:16 PM

css

What are the css properties for rounded borders?

What are the css properties of the rounded border:

1. Introduction to the rounded border

It is to set the four corners of the element through the border-radius attribute {the attribute is not inherited}.

border-radius has four attributes: top, left, right, bottom, which can be used to set pixels. You can also directly set a value so that all four sides are equal.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50px;
        width: 50px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

Copy after login

What are the css properties for rounded borders?

You can also set two values border-radius at the same time: 50px 99px; correspondingly, they are 50px for top and bottom, and 99px for left and right. You can also set three values to set the border-radius clockwise: 50px 99px 40px; the top is 50px, the left and right are 99px, and the bottom is 40px.

2. You can also use border-radius: r to set a circle. The r here refers to the size of the radius (with a length unit). To create a circle, you should set the value of r to the height of the element. and half the length. When the height and width are equal, this method of selecting the value is that the circle will develop towards an ellipse as the width and height are changed.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

Copy after login

Circle:

What are the css properties for rounded borders?