The following three properties are added to CSS3.
border-radius
is used to can create rounded borders.
box-shadow
adds shadow to elements.
border-image
can specify an image as a border.
You can create a border with rounded corners using the border radius feature.
There are five properties associated with this feature.
The following code creates a Curved Border.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww. j av a2s. c o m-->
border: medium solid black;
border-top-left-radius: 20px 15px;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
The code above is rendered as follows:
The border-radius shorthand property lets you specify one value for all four corners, or four individual values in a single value.
The following code uses the border-radius Shorthand Property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- ww w. j a v a 2 s .c o m-->
border: medium solid black;
}
#first {
border-radius: 20px/15px;
}
#second {
border-radius: 50% 20px 25% 5em/25% 15px 40px 55%
}
</style>
</head>
<body>
<p id="first">This is a test.</p>
<p id="second">This is a test.</p>
</body>
</html>
The code above is rendered as follows:
We can use the box-shadow property in CSS3 to add shadow to boxes.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- w ww . j a v a 2s .com-->
width: 300px;
height: 300px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>Hi</div>
</body>
</html>
The code above is rendered as follows:
The border-image property specifies an image to be used as a border.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- ww w . java 2 s . co m-->
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
}
#round {
border-image: url(http://java2s.com/style/demo/border.png) 30 30 round;
}
#stretch {
border-image: url(http://java2s.com/style/demo/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<div id="stretch">Here, the image is stretched to fill the area.</div>
<p>Here is the image that is used:</p>
<img src="http://java2s.com/style/demo/border.png">
</body>
</html>
The code above is rendered as follows: