Post
Ask Question

CSS Border Property in HTML: Part I

Introduction 

 
The border shorthand property sets all the border properties in one declaration ie; border-width, border-style, and border-color.
 
CSS border Property
 
border:5px solid red;
 
border-in-HTML.png
 
CSS border-bottom Property
 
border-style:solid;
border-bottom:thick dotted #ff0000;
 
border-bottom-in-HTML.png
 
CSS border-bottom-color Property
 
border-style:solid;
border-bottom-color:#ff0000;
 
border-bottom-color-in-HTML.png
 
CSS border-bottom-style Property
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. p {border-style:solid;}  
  6. p.none {border-bottom-style:none;}  
  7. p.dotted {border-bottom-style:dotted;}  
  8. p.dashed {border-bottom-style:dashed;}  
  9. p.solid {border-bottom-style:solid;}  
  10. p.double {border-bottom-style:double;}  
  11. p.groove {border-bottom-style:groove;}  
  12. p.ridge {border-bottom-style:ridge;}  
  13. p.inset {border-bottom-style:inset;}  
  14. p.outset {border-bottom-style:outset;}  
  15. </style>  
  16. </head>  
  17.    
  18. <body>  
  19. <p class="none">No bottom border.</p>  
  20. <p class="dotted">A dotted bottom border.</p>  
  21. <p class="dashed">A dashed bottom border.</p>  
  22. <p class="solid">A solid bottom border.</p>  
  23. <p class="double">A double bottom border.</p>  
  24. <p class="groove">A groove bottom border.</p>  
  25. <p class="ridge">A ridge bottom border.</p>  
  26. <p class="inset">An inset bottom border.</p>  
  27. <p class="outset">An outset bottom border.</p>  
  28. </body>  
  29. </html> 
border-bottom-style-in-HTML.png
 
CSS border-bottom-width Property  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. p  
  6. {  
  7. border-style:solid;  
  8. border-bottom-width:15px;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13.    
  14. <p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>  
  15.    
  16. </body>  
  17. </html> 
border-bottom-width.png
 
CSS border-collapse Property
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. table  
  6. {  
  7. border-collapse:collapse;  
  8. }  
  9. table, td, th  
  10. {  
  11. border:1px solid black;  
  12. }  
  13. </style>  
  14. </head>  
  15.    
  16. <body>  
  17. <table>  
  18. <tr>  
  19. <th>Firstname</th>  
  20. <th>Lastname</th>  
  21. </tr>  
  22. <tr>  
  23. <td>Peter</td>  
  24. <td>Griffin</td>  
  25. </tr>  
  26. <tr>  
  27. <td>Lois</td>  
  28. <td>Griffin</td>  
  29. </tr>  
  30. </table>  
  31. <p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results  
  32. in IE8 and earlier versions.</p>  
  33. </body>  
  34. </html> 
border-collapse-in-HTML.png
 
CSS border-color Property
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. p.one  
  6. {  
  7. border-style:solid;  
  8. border-color:#0000ff;  
  9. }  
  10. p.two  
  11. {  
  12. border-style:solid;  
  13. border-color:#ff0000 #0000ff;  
  14. }  
  15. p.three  
  16. {  
  17. border-style:solid;  
  18. border-color:#ff0000 #00ff00 #0000ff;  
  19. }  
  20. p.four  
  21. {  
  22. border-style:solid;  
  23. border-color:#ff0000 #00ff00 #0000ff #fa00ff;  
  24. }  
  25. </style>  
  26. </head>  
  27.    
  28. <body>  
  29. <p class="one">One-colored border!</p>  
  30. <p class="two">Two-colored border!</p>  
  31. <p class="three">Three-colored border!</p>  
  32. <p class="four">Four-colored border!</p>  
  33. <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>  
  34. </body>  
  35. </html> 
border-color-in-HTML.png
 
CSS border-left Property
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. p  
  6. {  
  7. border-style:solid;  
  8. border-left:thick double #ff0000;  
  9. }  
  10. </style>  
  11. </head>  
  12.    
  13. <body>  
  14. <p>This is some text in a paragraph.</p>  
  15. </body>  
  16. </html> 
border-left-in-HTML.png
 
Here, the border-left Property contains some more properties as shown below:
  • border-left-color-- Property:
    border-left-color:orange;
     
border-left-color-in-HTML.png
 
  • border-left-style Property :
    1. <!DOCTYPEhtml>  
    2. <html>  
    3. <head>  
    4. <styletypestyletype="text/css">  
    5. p  
    6. {  
    7. border-style:solid;  
    8. }  
    9. p.none {border-left-style:none;}  
    10. p.dotted {border-left-style:dotted;}  
    11. p.dashed {border-left-style:dashed;}  
    12. p.solid {border-left-style:solid;}  
    13. p.double {border-left-style:double;}  
    14. p.groove {border-left-style:groove;}  
    15. p.ridge {border-left-style:ridge;}  
    16. p.inset {border-left-style:inset;}  
    17. p.outset {border-left-style:outset;}  
    18. </style>  
    19. </head>  
    20.    
    21. <body>  
    22. <p class="none">No left border.</p>  
    23. <p class="dotted">A dotted left border.</p>  
    24. <p class="dashed">A dashed left border.</p>  
    25. <p class="solid">A solid left border.</p>  
    26. <p class="double">A double left border.</p>  
    27. <p class="groove">A groove left border.</p>  
    28. <p class="ridge">A ridge left border.</p>  
    29. <p class="inset">An inset left border.</p>  
    30. <p class="outset">An outset left border.</p>  
    31. </body>  
    32. </html> 
border-left-style-in-HTML.png
  • border-left-width Property:
    border-left-width:15px;
border-left-width-in-HTML.png
 

Summary

 
Using this article we are able to give a nice look & feel to our Web-Page.

TRENDING UP

View All