CSS Tutorial - CSS3 Border

The following three properties are added to CSS3.

border-radius
box-shadow
border-image

border-radius is used to can create rounded borders. box-shadow adds shadow to elements. border-image can specify an image as a border.

Rounded Corner Border

You can create a border with rounded corners using the border radius feature.

There are five properties associated with this feature.

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right- radius
Sets the radius for a single corner.
Value:A pair of length or percentage values. The percentages relate to the width and height of the border box.
border-radius
This shorthand property sets all corners at once.
Value:One or four pairs of length or percentage values, separated by a / character.

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.

Example

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:

CSS3 box-shadow Property

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:

CSS3 border-image Property

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: