CSS3 Rounded Corners

August 26, 2016 by Arti Khedkar

Filed under HTML & CSS

Last modified August 26, 2016

 

CSS3 Rounded Corners

 

 

Css3 Rounded corner are used to add colored corners by using  Border-colored Property.

 

css3 rounded

Syntax:
#rcorners {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

br

In that property, if you assign border-radius property this will apply to all four borders.

Values Description
Border-  radius
Use this for setting four border radius properties.
border-top-left-radius
Use this for setting the border of top left corner.
border-top-right-radius
Use this for setting the border of top right corner.
border-bottom-right-radius
Use this for setting the border of bottom right corner.
border-bottom-left-radius
Use this for setting the border of bottom left corner

 

Example:

 

<html>

<head>

<style>

#rcorners1 {

border-radius: 30px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners2 {

border-radius: 30px;

border: 2px solid #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners3 {

border-radius: 35px;

background: url(flower.gif);

background-position: right 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>

 

Leave a Comment