here2share

HTML border-style properties

Aug 13th, 2016
143
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.06 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.     text-indent: 30px;
  7. }
  8. p.one {
  9.     border-style: solid;
  10.     border-width: 5px;
  11. }
  12.  
  13. p.two {
  14.     border-style: solid;
  15.     border-width: medium;
  16. }
  17.  
  18. p.three {
  19.     border-style: dotted;
  20.     border-width: 2px;
  21. }
  22.  
  23. p.four {
  24.     border-style: dotted;
  25.     border-width: thick;
  26. }
  27.  
  28. p.five {
  29.     border-style: double;
  30.     border-width: 15px;
  31. }
  32.  
  33. p.six {
  34.     border-style: double;
  35.     border-width: thick;
  36. }
  37.  
  38. p.seven {
  39.     border-style: solid;
  40.     border-width: 2px 10px 4px 20px;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <h2>The border-width Property</h2>
  47. <p>This property specifies the width of the four borders:</p>
  48.  
  49. <p class="one">Some text.</p>
  50. <p class="two">Some text.</p>
  51. <p class="three">Some text.</p>
  52. <p class="four">Some text.</p>
  53. <p class="five">Some text.</p>
  54. <p class="six">Some text.</p>
  55. <p class="seven">Some text.</p>
  56.  
  57. <p><b>Note:</b> The "border-width" property does not work if it is used alone.
  58. Always specify the "border-style" property to set the borders first.</p>
  59.  
  60. </body>
  61. </html>
Add Comment
Please, Sign In to add comment