CSS Shorthand Border Property

« Previous Next »

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width

border-style (required)

border-color

Example

        

      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      p  {
        border:5px solid red;
    
            }
                    
      </style> 
      </head> 
      <body> 

      <h2>The border Property</h2>

      <p>AIT Academy of Information Technology</p>

  
          </body>
          </html>

Result:

Left Border

Example

        

      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      p {
         border-left:6px solid red;
         background-colo: lightgrey;

            }

      </style> 
      </head> 
      <body> 

      <h2>The border-left Property</h2>

      <p>AIT Academy of Information Technology</p>
            
          </body>
          </html>

Result:

Bottom Border

Example

        

      <!DOCTYPE html>
      <html>
      <head> 
      <style> 
      
      p {
        border-bottom:6px solid red;
        background-color:lightgrey;

            }
                    
      </style> 
      </head> 
      <body> 

      <h2>The border-bottom Property</h2>
      <p>(AIT) AIT Academy of Information Technology</p>
  
          </body>
          </html>