Cascading Style Sheets (CSS) is a useful asset for web engineers, permitting them to style and design web pages with artfulness. One of the key properties that add to the visual allure of components is border-radius. This flexible property permits you to make adjusted corners for borders, adding a bit of polish to your design. How about we dig into the complexities of border-radius and investigate its different applications.
Understanding the Basics
At its core, border-radius defines the curvature of a component's edges. It serves as a shortcut for setting the radius of each corner independently, including border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. These attributes provide the flexibility to customize the curvature of individual corners.
This CSS attribute contains a list of properties organized in the table below:
| Property | Description |
|---|---|
| border-top-left-radius | It is used to set the border-radius for the top-left corner |
| border-top-right-radius | It is used to set the border-radius for the top-right corner |
| border-bottom-right-radius | It is used to set the border-radius for the bottom-right corner |
| border-bottom-left-radius | It is used to set the border-radius for the bottom-left corner |
If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will be the same as top-left.
Single Value:
When providing a singular value, such as border-radius: 30px;, it results in uniform rounded corners on all sides, ensuring evenly curved edges.
Two Values:
Introducing a pair of values, such as border-radius: 20% 10%;, allows you to define different radii for horizontal and vertical corners. The first value controls the top-left and bottom-right corners, whereas the second value affects the top-right and bottom-left corners.
Three and Four Values:
Working with three and four values adds an extra layer of complexity. When using border-radius: 10% 30% 20%;, each value corresponds to a specific corner - the top-left, top-right, and bottom-right/bottom-left corners individually. In the case of four values such as border-radius: 10% 30% 20% 40%;, you address each corner's radius independently.
Explicit Corners:
Zeroing in on a specific corner is essential at times. Employ attributes such as border-top-left-radius to target the top-left corner, creating a unique style for your elements. By using the slash (/), you can define distinct horizontal and vertical radii. For example, border-radius: 10%/50%; establishes a horizontal radius of 10% and a vertical radius of 50%.
Syntax
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial;
Property values
length: It specifies the configuration of the corners by indicating the radius size with numerical length values. The default setting is 0, and it does not permit negative values to be used.
percentage: It represents the radius size as a percentage and restricts the use of negative values.
Example:
#roundedBox {
border-radius: 20px;
background-color: #7fd7e7;
}
#fancyBox {
border-radius: 15% 10%;
background-color: #ffa07a;
}
#customBox {
border-radius: 20px 30px 10px;
background-color: #98fb98;
}
Border-radius Example
Code:
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}
p{
font-size: 25px;
}
#one {
border-radius: 90px;
background: lightgreen;
}
#two {
border-radius: 25% 10%;
background: orange;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}
#four {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}
</style>
</head>
<body>
<div id = "one">
<h2> Welcome to the C# Tutorial </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Welcome to the C# Tutorial </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the C# Tutorial </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the C# Tutorial</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>
Output
Next, we will explore the border-radius properties for individual corners.
Example 1: Border-top-left-radius
This CSS attribute defines the curvature of the upper-left corner of a border of an element, allowing precise customization for a tailored look.
Code:
<!DOCTYPE html>
<html>
<head>
<title> CSS border-radius </title>
<style>
#left {
border-top-left-radius: 250px;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the C# Tutorial</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>
Output
Example 2: Border-top-right-radius
Positioned at the top-right corner, this attribute enables the application of a specific radius to achieve aesthetically pleasing designs with asymmetrical border curvature.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-top-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the C# Tutorial</h2>
<p>border-top-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
Output
Example 3: Border-bottom-right-radius
With this feature, you can manage the adjustment of the bottom-right corner, contributing to a tidy and visually appealing appearance for the overall element.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-right-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the C# Tutorial</h2>
<p>border-bottom-right-radius: 50%;</p>
</div>
</center>
</body>
</html>
Output
Example 4: Border-bottom-left-radius
Focusing on the lower-left corner, this attribute provides the flexibility to customize the edges of an element individually, enhancing design possibilities.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#left {
border-bottom-left-radius: 50%;
background: lightgreen;
padding: 50px;
border: 6px ridge red;
width: 300px;
height: 200px;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div id = "left">
<h2>Welcome to the C# Tutorial</h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>
Output
Example 5: Border-bottom-left-radius using slash
We have the option to define distinct horizontal and vertical values by employing the slash (/) symbol. The values preceding the slash (/) represent the horizontal radius, while those following the slash (/) pertain to the vertical radius.
There is an illustration provided below utilizing the forward slash (/) symbol.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 50px;
border: 6px ridge red;
width: 300px;
margin: 20px;
font-weight: bold;
height: 175px;
float: left;
font-size: 25px;
}
#one {
border-radius: 10% / 50%;
background: lightgreen;
}
#two {
border-radius: 120px / 100px 10px;
background: lightblue;
}
#three {
border-radius: 50% 10em / 10% 20em;
background: lightpink;
}
#four {
border-radius: 100px 10em 120px / 30%;
background: cyan;
}
</style>
</head>
<body>
<center>
<div id = "one">
<h2>Welcome to the C# Tutorial</h2>
<p>border-radius: 10% / 50%; </p>
</div>
<div id = "two">
<h2>Welcome to the C# Tutorial</h2>
<p>border-radius: 120px / 100px 10px; </p>
</div>
<div id = "three">
<h2>Welcome to the C# Tutorial</h2>
<p>border-radius: 50% 10em / 10% 20em; </p>
</div>
<div id = "four">
<h2>Welcome to the C# Tutorial</h2>
<p>border-radius: 100px 10em 120px / 30%; </p>
</div>
</center>
</body>
</html>
Output
Mastering the border-radius attribute in CSS unlocks a plethora of design possibilities. Whether aiming for a subtle curve or a more pronounced stylized look, gaining proficiency in manipulating border radii enables you to craft visually appealing and user-friendly interfaces. Experiment with different values and combinations to discover the perfect match for your web endeavors.