CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Border is most important property of CSS for a website. There are majority HTML tag support CSS Border property
By this tutorials you can learn
1) How to use CSS Border?
2) Kinds of CSS Border Style?
3) Example of CSS Border Style.
CSS Border use in a style code area - like: border: 1px solid #000000; Where border = property name; 1px = border thickness; solid = border style; #000000 = border color code you can use color name like red, green, blue etc. Find out more HTML Color Code.
1) border: solid - for solid border.
2) border: dotted - for dotted border.
3) border: double - for double line border.
4) border: ridge - for ridge style border.
5) border: inset - for inset style border.
6) border: outset - for out side style border.
7) border: none - for no border.
8) border: hidden - for hidden border.
9) border: dashed- for dashed style border.
10) border: thick - for thick style border.
11) border: thin - for thin style border.
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Border Styles.</title>
<style type="text/css">
.border-solid{ border:2px solid red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-dotted{ border:2px dotted red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-double{ border:3px double red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-ridge{ border:2px ridge red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-inset{ border:2px inset red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-outset{ border:2px outset red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-none{ border:2px none red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-hidden{ border:2px hidden red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-dashed{ border:2px dashed red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-thick{ border:2px thick red; width: 100%; height: 35px; margin-top:5px; float:left; }
.border-thin{ border:2px thin red; width: 100%; height: 35px; margin-top:5px; float:left; }
</style>
</head>
<body>
<p class="border-solid">Example for border solid.</p>
<p class="border-dotted">Example for border dotted.</p>
<p class="border-double">Example for border double.</p>
<p class="border-ridge">Example for border ridge.</p>
<p class="border-inset">Example for border inset.</p>
<p class="border-outset">Example for border outset.</p>
<p class="border-none">Example for border none.</p>
<p class="border-hidden">Example for border hidden.</p>
<p class="border-dashed">Example for border dashed.</p>
<p class="border-thick">Example for border thick.</p>
<p class="border-thin">Example for border thin.</p>
</body>
</html>
Example for border solid.
Example for border dotted.
Example for border double.
Example for border ridge.
Example for border inset.
Example for border outset.
Example for border none.
Example for border hidden.
Example for border dashed.
Example for border thick.
Example for border thin.
You can change CSS Border property 4 side with different style and color.
Example
Example of CSS border All side different color and style.
Example of CSS left border.
Example of CSS right border.
Example of CSS top border.
Example of CSS bottom border.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Border Styles.</title>
<style type="text/css">
.border-4side{
border-left:2px solid red;
border-right:2px dashed green;
border-top:2px dashed blue;
border-bottom:2px dotted red;
width: 100%;
height: 50px;
margin-top:5px;
float:left;
}
.border-left{
border-left:2px solid red;
width: 100%;
height: 50px;
margin-top:5px;
float:left;
}
.border-right{
border-right:2px dashed green;
width: 100%;
height: 50px;
margin-top:5px;
float:left;
}
.border-top{
border-top:2px dashed blue;
width: 100%;
height: 50px;
margin-top:5px;
float:left;
}
.border-bottom{
border-bottom:2px dotted red;
width: 100%;
height: 50px;
margin-top:5px;
float:left;
}
</style>
</head>
<body>
<p class="border-4side">Example of CSS border All side different color and style.</p>
<p class="border-left">Example of CSS left border.</p>
<p class="border-right">Example of CSS right border.</p>
<p class="border-top">Example of CSS top border.</p>
<p class="border-bottom">Example of CSS bottom border.</p>
</body>
</html>
You can make your div circle using CSS border radius.
Example
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS Border Radius.</title>
<style type="text/css">
.border-radius50prnt{
border:2px solid red;
border-radius: 50%;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius50px{
border:2px solid green;
border-radius: 30px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius-topleft{
border:2px solid blue;
border-top-left-radius: 50px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius-topright{
border:2px solid black;
border-top-right-radius: 50px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius-bottomright{
border:2px solid yellow;
border-bottom-right-radius: 50px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius-bottomleft{
border:2px solid green;
border-bottom-left-radius: 50px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
.border-radius-4sidedif{
border:2px solid blue;
border-radius: 50% 0px 30px 10px;
width: 43%;
text-align: center;
line-height: 200px;
height: 200px;
margin:5px;
float:left;
}
</style>
</head>
<body>
<div class="border-radius50prnt"> CSS Border Radius 50%</div>
<div class="border-radius50px"> CSS Border Radius 30px</div>
<div class="border-radius-topleft"> CSS Border Radius Top Left 50px</div>
<div class="border-radius-topright"> CSS Border Radius Top Right 50px</div>
<div class="border-radius-bottomright"> CSS Border Radius Bottom Right 50px</div>
<div class="border-radius-bottomleft"> CSS Border Radius Bottom Left 50px</div>
<div class="border-radius-4sidedif"> CSS Border Radius 4 side Different</div>
</body>
</html>