CSS Borders Tutorial

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!

Hemisphere

Round Rectangle

Bullet

Leaf

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.












If your Browser supports Css Borders then you can see the following border effects.

Advanced Hemisphere

Advanced Round Rectangle

Advanced Bullet

Advanced Leaf

Borders can be applied in the following ways.

Border Syntax

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

sub-property



top

right

bottom

left



we can use width, color, style and radius as sub-properties of Border.

This value gets assigned to the top portion of the border


This value gets assigned to the right portion of the border

This value gets assigned to the bottom portion of the border

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.

1. The first value gets assigned to the top portion of the border.
2. The second value gets assigned to Right portion of the border.
3. The third value gets assigned to the Bottom portion of the border.
4. 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



For Mozilla Firefox

For Webkit Browsers

box-shadow:

-moz-box-shadow:

-webkit-box-shadow:


0px 30px 70px 20px;

0px 30px 70px 20px;

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<head>

<style type=text/css>


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


</style>

</head>

! : Line 8 border:thick solid;



Border width (thick) wont 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

1
2
3
4
5
6
7

<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

1
2
3
4
5

#hemisphere{
border-radius:100px 100px 0 0 ;

-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;

}  

Green

Yellow


Blue

Pink



=> Top Border

=> Right Border

=> Bottom Border


=> Left Border

Advanced Hemisphere

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

Adv-Hemisphere

1
2
3
4
5
6
7
8

#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

1
2
3
4
5

#round-rectangle{
border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;
}  

Green


Yellow

Blue

Pink



=> Top Border

=> Right Border

=> Bottom Border


=> Left Border

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).

Advanced Round Rectangle

1
2
3
4
5
6
7
8

#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

1
2
3
4
5

#bullet{
border-radius: 20px 100px 100px 20px;

-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;

}  

Green


Yellow

Blue

Pink



=> Top Border

=> Right Border

=> Bottom Border


=> Left Border

Advanced Bullet

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

Advanced Bullet

1
2
3
4
5
6
7
8

#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

1
2
3
4
5

#leaf{
border-radius: 0 120px 0 120px;

-moz-border-radius: 0 120px 0 120px;
-webkit-border-radius: 0 120px 0 120px;

}  

Green


Yellow

Blue

Pink



=> Top Border

=> Right Border

=> Bottom Border


=> Left Border

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.

Advanced Leaf

1
2
3
4
5
6
7
8
9

#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;
}