Basic Concepts, Tips, Tricks & Design Ideas

In this tutorial you will learn all about CSS borders. Learn how to create rounded corners in CSS and more! The CSS code for all these designs are also included below. Please do like, tweet or share this tutorial if you find it helpful!

The Css Border property is used to add borders to html elements. With the Css Border Property width, color and border type can be changed. Border Radius can also be used to produce round corners in supported Browsers like IE9, Opera 8+, Firefox and webkit browsers like Chrome & Safari.
IE9 and Opera both use the same code to display Border Radius. For using Border Radius in Firefox and Webkit Browsers a prefix -moz- for Firefox and -webkit- for Webkit browsers like Chrome and Safari.

Border effects:

Borders can be applied in the following ways.

Border Syntax

border-(sub-property): (top) (right) (bottom) (left);

sub-property	we can use width, color, style and radius as sub-properties of Border.
top	This value gets assigned to the top portion of the border
right	This value gets assigned to the right portion of the border
bottom	This value gets assigned to the bottom portion of the border
left	This value gets assigned to the left portion of the border

Here in sub-property we can use width, color, style and radius as sub-types of Border.
Four values need be to defined.

The first value gets assigned to the top portion of the border.
The second value gets assigned to Right portion of the border.
The third value gets assigned to the Bottom portion of the border.
The last value gets assigned to the left portion of the border.

The values in the right are used to assign numerical values in pixels for width and radius. Colors can be assigned to the borders by using RGB Color Code, Hex Color Code or by Color names.

Border Color

Syntax : border-color: (top) (right) (bottom) (left);
Example: border-color: #85C226 #F7C200 #4493A0 #DF127B ;

Here the top border is green(#85C226) in color,
right border is yellow(#F7C200),
the bottom has blue(#4493A0)
and Left border is pink(#DF127B) in color.

Border Styles – Important!

This property must be used if you are using any of the Border properties.
Without using this border-style property you won’t see any borders at all.
Syntax : border-style: (top) (right) (bottom) (left);
Example: border-style: solid dotted groove double;

Here the top border (green) has a solid style,
right (yellow) one has dotted,
bottom (blue) one has groove and
the left (pink) one has the double style.

Border Width

Syntax : border-width: (top) (right) (bottom) (left);
Example: border-width: 5px 10px 15px 20px;

Here Top (green) border’s width is 5 pixel,
right (yellow) border is 10 pixel wide,
bottom (blue) is 15 pixel
and left (pink) is 20 pixel wide.

Border Radius

Syntax : border-radius: (top-left) (top-right) (bottom-right) (bottom-left);
Example: border-radius: 0px 30px 70px 20px;

For displaying round corners Border Radius property is used.
IE9 and Opera use the same code. For Firefox a prefix -moz- needs to be added before the code. And for Webkit Browsers -webkit- needs to be added before the code.

Box-shadow property for all the browsers.

For IE and Opera – box-shadow:0px 30px 70px 20px;
For Mozilla Firefox -moz-box-shadow:0px 30px 70px 20px;
For Webkit Browsers -webkit-box-shadow:0px 30px 70px 20px;

No Border radius ( 0px ) has been applied on the top-left (green-pink) corner.
Border radius ( 30px ) has been applied on the top-right (green-yellow) corner.
Border radius ( 70px ) has been applied on the bottom-right (blue-yellow)corner.
Border radius ( 20px ) has been applied on the bottom-left (blue-pink) corner.

Now lets try making Hemisphere, Round Rectangle, Bullet and Leaf as shown at the top.
What we’ll do here is create an empty <div> </div> inside your <body> </body> tags, then assign some width and height to it. We’ll apply a thick border width to it so that the effect is visible clearly.

Stylesheet Code for <head> </head> tag

<head>

<style type=text/css>

#example{
width:120px;
height:60px;
border:thick solid;
}

</style>

</head>

! : Line 8 border:thick solid; Border width (thick) won’t work unless border type (solid) is also included in the code.

Please Note !The width and height as defined above will be same for all the <div> </div> tag’s below. Just add the border-properties that I’m going to explain below.

Code for <body> </body> tag

<body>

<div id=example>

</div>
</body>

Hemisphere

Use values of width, height and border as defined above. Only add these codes to your existing stylesheet or make a new one.

#hemisphere{
border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
 }

Advanced Hemisphere

Now we’ll add more effects to the border by applying different values for width and using different border style.

#adv-hemisphere{
border-width: 4px 30px 4px 30px;
border-style: groove ridge dashed groove;
border-color: #cc0000;
border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
 }

Here Border Properties like border-width, border-style and border-color are added and rest of the codes for Advanced Hemisphere are same as Hemisphere above.

Round Rectangle

Here all the corners have the same border radius (20px).

#round-rectangle{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 }

Advanced Round Rectangle

We’ll make top border’s and bottom border’s width zero pixel, Use same border-radius (40px) for both top corners and for both the bottom corners (60px).

#adv-round-rectangle{
border-width: 0px 12px 0px 12px;
border-style: double;
border-color: violet;
border-radius:40px 40px 60px 60px;
-moz-border-radius:40px 40px 60px 60px;
-webkit-border-radius:40px 40px 60px 60px;
 }

Bullet

Same border radius (20px) is assigned to the corners on the left, and same border radius (100px) is assigned to the right corners.

#bullet{
border-radius: 20px 100px 100px 20px;
-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;
 }

Advanced Bullet

Here Groove style border and different colors for each border is used and the code is same as above.

#adv-bullet{
border-width: 12px;
border-style: groove;
border-color: red blue green black;
border-radius:20px 100px 100px 20px;
-moz-border-radius:20px 100px 100px 20px;
-webkit-border-radius:20px 100px 100px 20px;
 }

Leaf

Same border radius (120px) is assigned to the corners on the top-right and bottom-left, and a border radius (0px) is assigned to the top-left and bottom-right corners.

#leaf{
border-radius: 0 120px 0 120px;
-moz-border-radius: 0 120px 0 120px;
-webkit-border-radius: 0 120px 0 120px;
 }

Advanced Leaf

Background color (orange) is used for the <div> . Solid style border is used here same color (blue) for the top and right border and same color (green) is used for bottom and left border.

#adv-leaf{
background:orange;
border-width:4px 30px 4px 30px;
border-style: solid;
border-color: #56c6d9 #56c6d9 #fe2192 #fe2192;
border-radius:0 120px 0 120px;
-moz-border-radius:0 120px 0 120px;
-webkit-border-radius:0 120px 0 120px;
 }