The rounded set
Border – the radius attribute
The value of the border-radius attribute is usually px, indicating the radius of the rounded corner.
The border-radius property can be set to four rounded border-radius: top left, top right, bottom right, bottom left, bottom left.
Small properties are used to stack large properties
| attribute | meaning |
|---|---|
| border-top-left-radius | The upper left corner |
| border-top-right-radius | The top right corner |
| border-bottom-left-radius | The lower left corner |
| border-bottom-right-radius | The lower right corner |
Percentage unit
The value of the border-radius attribute can also be expressed in percentages, indicating where on each edge does the rounded corner start
A square box is perfectly round if the border-radius property is set to 50%.
Rectangular boxes are ellipses if the border-radius property is set to 50%
Case presentation
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style>. Box1 {width:200px; height:200px; border:2px solid black; border-radius:10px; margin-bottom:20px; } .box2 { width:200px; height:200px; Border :2px solid rgba(0, 0, 0, 0.251); border-radius:10px; /* set the rounded corners */ margin-bottom:20px; } .box3 { width:200px; height:200px; border:2px solid black; border-radius:1000px; } .box4 { width:200px; height:200px; border: 1px solid #000; */ border-radius:20px 40px 50px 60px; } .box5 { width:200px; height:200px; border: 1px solid #000; border-radius:40px; /* border-top-left-radius:0; } .box6 { width:200px; height:200px; border: 1px solid #000; /* square set 50% to form a circle */ border-radius:50%; } .box7 { width:200px; height:400px; border: 1px solid #000; /* rectangle set 50% to form oval */ border-radius:50%; }.box8 {/* If the radius is greater than the minimum width and height, it will form a capsule */ width:200px; height:400px; border: 1px solid #000; border-radius:200px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> </body> </html>Copy the code