Chapter 16 - What is Border in CSS?

           , , , ,      No comments   
Border is an outline of any element created in HTML with the help of style sheet or css. You can set the color, style or thickness if required. All can be done in the css style sheet.

It has 3 attributes and you can either use one in each declaration or your can use all in one line of css code.

Border

Example for Border declaration:-
 /*Syntax of Border declaration in CSS*/

 bborder:10px solid #ff2354;
 

What are 3 attributes of Border?
  1. Color
  2. Style
  3. Width

Border Color

If you want to set the color of the border, you can use border-color property. It has 4 values to use. You can use which you are comfortable with.
  1. Color Name
  2. Hexadecimal Number
  3. RGB Color code
  4. Transparent

Example for Border Color:-

 /*Syntax of Border Color in CSS*/

 bborder-color:#ff2354;
 

Border Style

There are border styles in css and you can set the border style as per your requirement. It has 9 values to choose.
  1. None 
  2. Solid
  3. Dashed
  4. Dotted
  5. Double
  6. Inset
  7. Outset
  8. Groove
  9. Ridge
  10. hidden

Example for Border Style:-

 /*Syntax of Border Style in CSS*/

 bborder-style:5px solid;
 

Border Width

Border width is an important attribute in css if you are using this property with any of your element in the HTML page. You can set each side a different value.

It has 4 values:-
  1. Length (Pixel)
  2. Thin
  3. Thick
  4. Medium

Example for Border Width:-

 /*Syntax of Border Width in CSS*/

 bborder-width:value;
 

As you know that there are 4 sides of border and you can set each side with different color, style and width.
4 sides of Border
  1. Border-Top
  2. Border-Bottom
  3. Border-Left
  4. Border-Right
You can also set each side with different style, color and width:

Example for Border Style with different sides:-

 /*Syntax of Border Style with different sides in CSS*/

 /*TOP Border*/
 border-top-color:#ff2354;:
 border-top-width:2px;
 border-top-style:dashed;

 /*Bottom Border*/
 border-bottom-color:#ff2354;:
 border-bottom-width:4px;
 border-bottom-style:dotted;

 /*Left Border*/
 border-left-color:#ff2354;:
 border-left-width:6px;
 border-left-style:solid;

 /*Right Border*/
 border-right-color:#ff2354;:
 border-right-width:7px;
 border-right-style:groove;
 

NOTE:- To use properties of border and its relevant values, read posts on each topic in the next section of this blog.

0 comments:

Post a Comment