CSS Border-radius Property

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 center, border-radius characterizes the shape of the sides of an element. It is shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. These properties empower you to autonomously set the radius for each corner.

This CSS property includes the properties that are tabulated as follows:

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:

At the point when you offer a single value, like border-radius: 30px;, it applies that radius to all corners, making consistently adjusted edges.

Two Values:

Presenting two values, similar to border-radius: 20% 10%;, empowers you to set various radii for even and vertical corners. The primary value addresses the top-left and bottom-right corners, while the subsequent value applies to the top-right and bottom-left corners.

Three and Four Values:

Things get much more intriguing with three and four values. With border-radius: 10% 30% 20%;, the values relate to top-left, top-right, and bottom-right/bottom-left corners, separately. For four values like border-radius: 10% 30% 20% 40%;, you take care of each corner independently.

Explicit Corners:

Here and there, you need to zero in on a particular corner. Use properties like border-top-left-radius to focus on the top-left corner, making an exceptional search for your elements. The slash (/) permits you to set separate level and vertical radii. For instance, border-radius: 10%/50%; sets a level radius of 10% and an upward radius of 50%.

Syntax

Property values

length: It defines the shape of the corners. It denotes the size of the radius using length values. Its default value is 0. It does not allow negative values.

percentage: It denotes the size of the radius in percentage. It also does not allow 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 javaTpoint.com </h2>
<p> border-radius: 90px; </p>
</div>
<div id = "two">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius: 25% 10%; </p>
</div>
<div id = "three">
<h2> Welcome to the javaTpoint.com </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>
<div id = "four">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>
</body>
</html>

Output

Now, let's see the border-radius for specific corners.

Example 1: Border-top-left-radius

This CSS property characterizes the curve of the top-left corner of an element's border, permitting exact customization for an adjusted appearance.

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 javaTpoint.com</h2>
<p>border-top-left-radius: 250px;</p>
</div>
</center>
</body>
</html>

Output

Example 2: Border-top-right-radius

Fitting the top-right corner, this property allows you to apply a particular radius to make stylishly satisfying designs with lopsided border roundness.

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 javaTpoint.com</h2>
<p>border-top-right-radius: 50%;</p>
</div>
</center>
</body>
</html>

Output

Example 3: Border-bottom-right-radius

With this property, you have some control over the adjusting of the bottom-right corner, adding to a cleaned and outwardly engaging search for the general 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 javaTpoint.com</h2>
<p>border-bottom-right-radius: 50%;</p>
</div>
</center>
</body>
</html>

Output

Example 4: Border-bottom-left-radius

Zeroing in on the bottom-left corner, this property gives the adaptability to shape the sides of an element exclusively, improving design prospects.

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 javaTpoint.com</h2>
<p>border-bottom-left-radius: 50%;</p>
</div>
</center>
</body>
</html>

Output

Example 5: Border-bottom-left-radius using slash

We can specify separate horizontal and vertical values by using the slash (/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash (/) are for the vertical radius.

There is an example given below using the 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 javaTpoint.com</h2>
<p>border-radius: 10% / 50%; </p>
</div>
<div id = "two">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius: 120px / 100px 10px; </p>
</div>
<div id = "three">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius: 50% 10em / 10% 20em; </p>
</div>
<div id = "four">
<h2>Welcome to the javaTpoint.com</h2>
<p>border-radius: 100px 10em 120px / 30%; </p>
</div>
</center>
</body>
</html>

Output

Mastering the border-radius property in CSS opens up a universe of design prospects. Whether you're going for the gold bend or an extreme adjusted style, understanding how to control border radii engages you to make outwardly engaging and easy to use interfaces. Try different things with various qualities and blends to find the ideal fit for your web projects.

Next TopicCSS border-collapse property

← prev next →