Hello friends in this blog post we will learn about web page development Describe about (CSS Rounded Corner) (CLASS:9) computer engineering students Now lets start.
CSS ROUNDED CORNER
→ CSS rounded corners are user to add special colored corner to body or text by using the border-radius property.
→ Rounded corners property:
. Defines the shape of the border of the bottom left corner.
→ Border-top-left-radius
. Defines the shape of the border of the top-left-corner.
→ Border-top-right-radius
. Defines the shape of the border of the top-right-corner.
→ Border-bottom-left-radius
. Defines the shape of the border of the bottom-left-corner.
→ Border-bottom-right-radius
. Defines the shape of the border of the bottom-right-corner.
Syntax:
border-radius:[length] [percentage/px];
border-*-*radius:[length] [percentage/px];
Example:
border-radius=50%
border-top-left-radius=50px;
border-top-left-radius; 100px 50px;
HTML CODE
<!doctype html>
<html>
<head>
<title>css rounded corner</title>
<link rel="style sheet" type="text/css" href="rounded.css">
</head>
<body>
<p id="linear"></p>
<p id="linear 1"></p>
<p id="linear 2"></p>
<p id="linear 3"></p>
<p id="radial"></p>
<p id="radial 1"></p>
<p id="radial 2"></p>
<p id="radial 3"></p>
</body>
</html>
CSS CODE
p{
height :150px;
width :150px;
float :left;
text-align :center;
margin :10px;
padding :50px;
background-color:lime;
#linear{
background-color:blue;
border-top-left:radius:50px;
}
#linear 1{
background-color:green;
border-top-right:radius:55px;
}
#linear 2{
background-color:yellow;
border-bottom-left:radius:55px;
}
#linear 3{
background-color:red;
border-bottom-right:radius:35px;
}
#radial{
background-color:lime;
border-top-left:radius:100px 50px;
}
#radial 1{
border:2px solid maroon;
border-radius:60px 40px 30px 15px;
}
#radial 2{
background-color:aqua;
border-radius:50px / 15px;
}
#radial 3{
background-color:blue;
border-radius:15px; / 50px;
}
 (WPD)){kind=link}
1 Comments
WOW
ReplyDelete