Border in CSS

HOME

About US

Border in CSS

Web Development : Starting from Concept, HTML, CSS, Web Site Develpment to Website Launching.
Written by: Sanjay Srivastava
B.Tech (Honours);IIT Kharagpur
PMP ; PMI USA

Chapter - 20 : CSS Borders and Dimensions: (Page 2/6)

(Cotinued from previous page)

iv) Border Commands: Border can be defined in multiple ways.

a) In single line: All the properties and values are written in one line.

Command: border:2px solid blue;

Output:
CSS

Note : This is applied to all 4 sides. Here the sequence of value is width - style - color. However it is not necessary to define all values. But if defined it should be in this sequence.

b) In multiple lines:

Command: p {border-right-style:solid; border-color:blue; border-width:2px;}

Output:
CSS

Note : This is applied to all 4 sides.

c)For individual sides:

Command: p {border-top-style:dotted; border-right-style:solid; border-bottom-style:dashed; border-left-style:double;}

Output: in CSS

Note : Similarly border-top-color / border-right-color / border-bottom-color / border-left-color and border widths can also be defined

d) For Combination sides : The CSS also allows defining the borders for 4 sides in one line or in the combinations of two sides. In all the following cases the sequence and combination is fixed as defined below

(Cont......... to next page (Pg-3))