CSS border-radius property

This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element.

It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.

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.

Let's see what happens when we provide a single value, two values, three values, and four values to this property.

If we provide a single value (such as border-radius: 30px;) to this property, it will set all corners to the same value.
When we specify two values (such as border-radius: 20% 10% ;), then the first value will be used for the top-left and bottom-right corners, and the second value will be used for the top-right and bottom-left corners.
When we use three values (such as border-radius: 10% 30% 20%;) then the first value will be used for the top-left corner, the second value will be applied on top-right, and bottom-left corners and the third value will be applied to the bottom-right corner.
Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then the first value will be the radius of top-left, the second value will be used for the top-right, the third value will be applied on bottom-right, and the fourth value is used for bottom-left.

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

<!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

Test it Now CSS border-radius property

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

Example- border-top-left-radius

It sets the border radius for the top-left corner.

<!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

Test it Now CSS border-radius property

Example- border-top-right-radius

It sets the border-radius for the top-right corner.

<!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

Test it Now CSS border-radius property

Example- border-bottom-right-radius

It sets the border-radius for the bottom-right corner.

<!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

Test it Now CSS border-radius property

Example- border-bottom-left-radius

It sets the border-radius for the bottom-left corner.

<!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

Test it Now CSS border-radius property

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.

Example

<!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

Test it Now CSS border-radius property

Next TopicCSS border-collapse property

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}