Welcome to our CSS tutorial on creating rounded corners! In this comprehensive guide, we'll explore how to give your web pages a more polished look by rounding their corners. By the end of this lesson, you'll be able to apply this technique to your own projects and style them with elegance. š”
Rounded corners are a design element that softens the sharp edges of rectangular shapes, such as boxes and borders, in web design. They add a modern touch and make your web pages more appealing to the eye.
To create rounded corners in CSS, we'll use the border-radius property. This property lets you specify the radius of the corners of an element's border. The border-radius property accepts four values that represent the top-left, top-right, bottom-right, and bottom-left corners, in clockwise order.
border-radius šThe border-radius property has the following syntax:
/* Keyword values */
border-radius: round | square;
/* Global values */
border-radius: inherit | initial | unset;
/* Length values */
border-radius: 5px;
border-radius: 5em;
border-radius: 5rem;
border-radius: 5ex;
/* Percentage values */
border-radius: 25%;
/* Multiple values */
border-radius: 5px 10px 15px 20px;š Note: If you provide only one value, it applies to all four corners equally. If you provide two values, the first one is for the top-left and bottom-right corners, while the second one is for the top-right and bottom-left corners. If you provide three or four values, they are applied in the order mentioned earlier.
In this example, we'll create a simple div with rounded corners using a single value:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 200px;
height: 200px;
background-color: #f1c40f;
border-radius: 50%;
margin: 50px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>In this example, we've set the border-radius to 50%, which creates a perfect circle. This value applies to all corners, resulting in a circular shape.
In this example, we'll create a simple div with different rounded corners using multiple values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 200px;
height: 100px;
background-color: #f1c40f;
border-radius: 20px 50px 20px 50px;
margin: 50px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>In this example, we've set the border-radius to 20px 50px 20px 50px, which results in a box with rounded corners on the top-left and bottom-right, while the top-right and bottom-left corners are square.
What is the purpose of the `border-radius` property in CSS?
Now that you've learned how to create rounded corners in CSS, you can add a touch of modern elegance to your web pages. Happy coding! š