css border

CSS Borders

CSS Borders

CSS Borders are an essential element of any web page. They are used to define the edges of elements on a page, such as images, tables, and text boxes. The borders can be used to create a visual effect on the page, as well as to provide structure and organization.

TheĀ  CSS Border property is used to establish a border for an element, namely border width, border style, and border color. In this example, we are going to work with a border to style it and some tricks with examples. You will learn about CSS border, border width, border color, border shorthand, and border radius.

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

You can change the border color. Set a color for the borders:  Example:

p{
    border-color: aqua;  
}

You can also change every border color individually.

p{
    border-left-color: #333333;
    border-top-color: #ff0000;
    border-right-color: #00ff00;
    border-bottom-color: #0000ff;
}

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;
}

CSS Border Examples

CSS Border Radius

The border-radius property defines the radius of the element’s corners.

<span class="hs-border">
    Radius
</span>

CSS

.hs-border{
        border: 1px  solid #333;
        padding: 15px;
        display: inline-block;
        width: 100px;
        height: 20px;
        border-radius: 15px 10px 5px 0;
    }
Radius

The order of the numbers is top-left, top-right, bottom-right, and bottom-left.

In the next example, we are going to create a circle by border-radius.

<span class="hs-circle">
    Circle
</span>

CSS

.hs-circle{
        border: 1px  solid #333;
        padding: 15px;
        width: 30px;
        height: 30px;
        display: inline-block;
        background: #eee;
        border-radius: 100%;
    }
Circle

You can add % to corners. In this example, we added 100% to the border-radius to create the circle. This example can be used in images too. For example, if you want to circle the author’s avatar picture, you can use this code.