- Theory
- Theory
- Comments
Rounding Corners, Part 2
You can round individual corners using the properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
You can also set different horizontal and vertical rounding radii. To do this, you need to write two values separated by spaces in the corner rounding property. The first value determines the horizontal radius, and the second determines the vertical:
/* Horizontal radius of 30px, vertical radius of 15px */
border-top-right-radius: 30px 15px;Various horizontal and vertical radii can be set in the border-radius property. To do this, use /. For example:
/* Horizontal radius for all corners of 10px, vertical radius of 5px */
border-radius: 10px / 5px;
/* Different horizontal and vertical radii for each corner */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rounding Corners, Part 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="portrait"></div>
</body>
</html>
CSS
.portrait {
box-sizing: border-box;
margin: 20px auto;
padding: 40px;
width: 400px;
height: 400px;
border: 40px solid rgba(255, 255, 255, 0.4);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background-color: #ffffff;
background-image:
url("img/glasses.svg"),
url("img/muffin.jpg");
background-position:
75px 125px,
center;
background-clip: padding-box;
background-origin: border-box;
background-size:
150px,
cover;
background-repeat: no-repeat;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Assign the following rounding to the portrait:
- Set the top left and right corners to
100px 50px, - and set the lower left and right corners to
20% 50%.
Comments