Post
Ask Question

CSS3 Series Part 4: Playing With Borders

Introduction

 
I strongly recommend reading the following previous parts.
 
This article explains the various kinds of borders in CSS3 and we'll also see some of the border styles in CSS.
 
So, before proceeding, let's have a look at the types of borders already available in CSS. Please find the following output for that.
 
 
The preceding output is the types of borders available in CSS. Now let's see what's the new things in CSS3.
 
In CSS3, 3 new types of borders were introduced, they are:
  • Border-radius
  • Box-shadow
  • Border-image
Using CSS3, you can create Rounded borders, you can add shadow to your elements, you can even use an image as a border.
 
In this article, we'll see the "Border-radius" and "Box-shadow" properties.
 
Border Radius
 
First, we'll explain border-radius. If you see in the previous versions of CSS (CSS1 and CSS2.0), we didn't have an option to create such rounded borders; it was very difficult to create a rounded border for any element.
 
But in CSS3, creating rounded borders is as simple as creating any normal border. We'll start creating rounded borders for each side and finally, we'll use shorthand property to create rounded borders for all sides within one line.
 
First, we'll create a box with a 5px border, font size of 25px, Gray type background color and some other styles as shown in the following example.
  1. div  
  2. {  
  3.     background-color:#f2f2f2;  
  4.     height:auto;  
  5.     width:80%;  
  6.     font-weight:bold;  
  7.     font-size:25px;  
  8.     text-align:center;  
  9.     padding:20px;  
  10.     border:5px solid #333;  
  11. } 
 
To create a Top-Left Rounded border, we'll use the "border-top-left-radius" property.
 
For example:
  1. .topLeft  
  2. {  
  3.    border-top-left-radius:25px;  
  4. } 
 
 
To create a Top-Right Rounded border, we'll use the "border-top-right-radius" property. 
 
For example:
  1. .topRight  
  2. {  
  3.    border-top-right-radius:25px;  
  4. } 
 
To create a Top-Right Rounded border, we'll use the "border-bottom-right-radius" property.
 
For example:
  1. .bottomLeft  
  2. {  
  3.    border-bottom-right-radius:25px;  
  4. } 
 
To create a Top-Right Rounded border, we'll use the "border-bottom-left-radius" property.
 
For example:
  1. .bottomLeft  
  2. {  
  3.    border-bottom-left-radius:25px;  
  4. } 
 
You can also create all the preceding things in one command as well using the "border-radius" property as discussed above, this is called a Shorthand property for border-radius property.
 
For example:
  1. .roundedBorder  
  2. {  
  3.    border-radius:25px;  
  4. } 
 
If you want to specify a different size for each side you can use the "border-radius" value in px in the following order:
  1. border-radius : top_left_px top_right_px bottom_right_px bottom_left_px. 
For example we'll create a rounded border for a div element, like 50px from the top-left, 40xpx from the top-right, 30px from the bottom-right, 20px from the bottom-left as shown below.
  1. .cocktail  
  2. {  
  3.    border-radius:50px 40px 30px 20px;  
  4. } 
 
Now, let's move on to the next property, "Box-Shadow".
 
Box Shadow
 
This property allows the user to cast a drop shadow from the frame of any element. The following is the syntax for the box-shadow.
  1. box-shadow: [Horizontal Offset], [Vertical Offset], [Blur Radius], [Spread Radius], [Color]; 
Name Description
Horizontal Offset
 
 Drop horizontal shadow, positive value for right shadow and negative for left
Vertical Offset Drop vertical shadow, positive value for the following shadow and negative for the preceding
Blur Radius Set the blur amount for shadow, 0 for sharp and higher the value, more blurred shadow
Spread Radius Set the size of the shadow, positive for more shadow, negative for less
Color Name of the color for the shadow
 
Let's look at an example. First, we'll create a simple box, then we'll provide various shadows to it.
  1. div  
  2. {  
  3.    height:100px;  
  4.    width:600px;  
  5.    background-color:goldenrod;  
  6.    border: 2px solid #333;  
  7.    font-size: 35px;  
  8.    text-align:center;  
  9.    font-weight:bold;  
  10. }  
  11. <div> Normal Box without Shadow. </div>
This will create a normal box as shown below.
 
 
Now we'll drop various kinds of shadows with the code + output as shown below.
  1. .horizontalShadow  
  2. {  
  3.    box-shadow: 20px 0px 20px 1px #333;  
  4. } 
  1. .verticalShadow  
  2. {  
  3.    box-shadow: 0px 20px 20px 1px #333;  
  4. } 
  1. .leftHorizontalShadow  
  2. {  
  3.    margin-left: 100px;  
  4.    box-shadow: -20px 0px 20px 1px #333;  
  5. } 
  1. .blurWith50px_and_10px_spread_radius  
  2. {  
  3.    box-shadow: 7px 10px 50px 10px #333;  
  4. } 
  1. .blurWith5px_and_5px_spread_radius  
  2. {  
  3.    box-shadow: 7px 10px 5px 5px #333;  
  4. } 
 
Now, here we're winding up with a box-shadow section and our article as well.
 
In this article, we've seen types of borders that are available in CSS and we've also seen new techniques to create rounded borders for each side of an element and its shorthand property to make rounded borders in a single line. We've also learned how to provide a shadow to any element that gives an element a new look.
 
In my next article, I'll be discussing a very interesting thing for creating a background, the addition of multiple colors using Gradients. Until then keep learning and keep sharing.


Similar Articles