CSS Border

The  CSS Border property is used to establish a border for an element, namely border width, border style, and border color.

p{
    border:  1px  solid  blue ;   
}

Border

Border – Individual Sides

p{
    border-bottom :  1px  solid  blue;  
}

Border

p{
    border-top :  1px  solid  blue;  
}

Border

p{
    border-left :  1px  solid  blue;  
}

Border

p{
    border-right :  1px  solid  blue;  
}

Border

Border Width

Set a width for the borders: 

p{
    border-width :  2px;  
}
p{
    border-top-width: 5px;
    border-bottom-width: 4px;
    border-left-width: 3px;
    border-right-width: 2px;
}

Border

Border Color

Set a color for the borders:  Example:

p{
    border-color: aqua;  
}

Border Shorthand

Shorthand properties can take multiple values, allow you to write less code, and provide smaller files for the user to download.

p{
   background-color: #000;
   background-image: url(images/img.jpg);
   background-repeat: no-repeat;
}

Find out how to use the CSS border shorthand property:

p{
   background:  #000  url(images/img.jpg)  no-repeat ;    
}

Rounded Borders

With border-radius property, you can give any element “rounded corners”.

1. border-radius

p{
   border-radius: 10px; 
}
p{
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
}

Or you can write all the property in one line of code:

/* top  left | top  right | bottom  right | bottom  left */
p{
   border-radius : 10px 0 3px 4px;  
}

2. Border Image

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

p{
   border-image: url(/css/images/pic.png) 30 round;
}

Values of border image

  • stretch: the initial value. The border image is stretched as needed to fill the area.
  • repeat: the image tiles to fill the area, dividing tiles if necessary.
  • round: the image tiles to fill the area, and is rescaled if necessary to avoid dividing tiles.
  • space: this value is not implemented by any browser yet.

Constituent properties: This property is a shorthand for the following CSS properties:

  • border-image-source : Used to set the image path
  • border-image-slice : Used to slice the boarder image, Up to four values may be specified.
  • border-image-width : Used to set the boarder image width, Up to four values may be specified.
  • border-image-repeat : Used to set the boarder image as rounded, repeated and stretched. Up to two values may be specified.
  • border-image-outset : The distance of the border image from the element’s outside edge. Up to four values may be specified.
p{
    border-image-source: url(/css/images/border.png);
    border-image-repeat: round;
    border-image-slice: 30;
    border-image-width: 10px;
    border-image-outset: 10px 25px;
}