Scribd
Upload
4 views3 pages

21 CSS Rounded Corners

The document explains the use of CSS3's border-radius property to create rounded corners for elements. It provides syntax examples and describes different properties for setting individual corner radii. Additionally, it includes HTML examples demonstrating the application of these styles.

Uploaded by

Komal Yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

21 CSS Rounded Corners

The document explains the use of CSS3's border-radius property to create rounded corners for elements. It provides syntax examples and describes different properties for setting individual corner radii. Additionally, it includes HTML examples demonstrating the application of these styles.

Uploaded by

Komal Yadav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Rounded Corners

CSS3 Rounded corners are used to add special colored corner to body or text by using
the border-radius property.A simple syntax of rounded corners is as follows −
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
The following table shows the possible values for Rounded corners as follows −

Sr.No. Value & Description

1 border-radius
Use this element for setting four boarder radius property

2 border-top-left-radius
Use this element for setting the boarder of top left corner

3 border-top-right-radius
Use this element for setting the boarder of top right corner

4 border-bottom-right-radius
Use this element for setting the boarder of bottom right corner

5 border-bottom-left-radius
Use this element for setting the boarder of bottom left corner

Example
This property can have three values. The following example uses both the values −
<html>
<head>
<style>

One Byte Labs | Page 1


#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>

<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>

Each Corner property


We can specify the each corner property as shown below example −
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {

One Byte Labs | Page 2


border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>

<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>

One Byte Labs | Page 3

You might also like