Border Radius

Part of the Styling with CSS section of Coddy's HTML journey — lesson 40 of 76.

In CSS, the border-radius property is used to create rounded corners for an element. This property allows you to specify the radius of the curvature for each corner, giving you control over the shape of the element's border. Here's the basic syntax for using the border-radius property:

selector {
    border-radius: value;
}

value: The desired radius for the rounded corners, which can be specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

You can specify a single value to apply the same radius to all four corners. In the following example, all <div> elements will have rounded corners with a radius of 10px.

div {
    border-radius: 10px;
}

You can set the different values for each corner individually, using the following order: top-left, top-right, bottom-right, bottom-left.

.button {
    border-radius: 10px 20px 30px 40px;
}

You can also specify only two values, the first value will apply to the top-left and bottom-right corners, and the second value will apply to the top-right and bottom-left corners.

img {
    border-radius: 20px 50px;
}

Challenge

Easy

You are given an HTML document with two <div> elements, each with the classes "one" and "two". Follow the steps below:

Write a CSS rule using a class selector to target all elements with the class “one”. Set the border to 3px solid #4287f5 and the border-radius to 15px to give all corners the same rounded shape.
Write a CSS rule using a class selector to target all elements with the class “two”. Set the border to any value and the border-radius to any value of your choice.

Cheat sheet

The border-radius property creates rounded corners for elements:

selector {
    border-radius: value;
}

Values can be specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

Single value - applies same radius to all corners:

div {
    border-radius: 10px;
}

Four values - individual corners (top-left, top-right, bottom-right, bottom-left):

.button {
    border-radius: 10px 20px 30px 40px;
}

Two values - first applies to top-left and bottom-right, second to top-right and bottom-left:

img {
    border-radius: 20px 50px;
}

Try it yourself

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>