css border

CSS Borders

/ CSS /

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.

Related Posts