CSS Borders

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

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

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

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.