CSS Border Style Deeply Explained

#1
Rahul 29-05-2013, 11:21 PM
CSS is a Widle used in web designing, its stands for Cascading Style Sheets, well i am not going to bored you writing too much, Lets Come to the Topic.
Starting With Very Easiest Style
I am Going to Create a border around a line or paragraph

HTML has <div></div> tags for DIV's and <p></p>

so now we have,
Code:
<div>Hello, This is My First Line.</div>

Make a Border, use inner stylesheet for now....
Make a Boder around Your Line.
Syntax:- BORDER:SIZE BORDER-TYPE COLOUR;
Types of Border:-
  • Groove
  • Solid
  • Dashed
  • Double
  • Ridge
  • Inset
  • Outset

Code:
<div STYLE="BORDER:1PX SOLID BLUE;">Hello, This is My First Line</div>

Explaination:-
  • STYLE:- This is used to start a inner stylesheet, it must have like this style="your style here"
  • BORDER:- This is for border, (A Line Around Your Text including left,right,top,down).
  • 1PX:- This is Size of Your Border, You Can Increase or Decrease According to you. 1px,2px,3px,....
  • SOLID:- This is a TYPE of Border
  • Blue:- This is a Color of Border

Code:
<div STYLE="BORDER:1PX SOLID BLUE;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX GROOVE BLACK;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX DOTTED LIME;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX DASHED BLUE;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX DOUBLE BLUE;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX INSET BLUE;">Hello, This is My First Line</div>
<div STYLE="BORDER:1PX OUTSET BLUE;">Hello, This is My First Line</div>
You can also use "BORDER-STYLE", "BORDER-LEFT", "BORDER-RIGHT", "BORDER-BOTTOM", "BORDER-TOP" and "BORDER-COLOR" Separately
e.g:-
Code:
<div style="
BORDER-LEFT:2px solid black;
BORDER-RIGHT:3px SOLID lime;">Hello, This is a Line</div>

This is Main Properties of a BORDER Style, There are more properties but i think this is widely used..