BORDER PROPERTIES

CSS Border properties:


The CSS border is a shorthand property used to set the border on an element. The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below
  1. border-style
  2. border-color
  3. border-width
  4. border-radius
1. CSS border-style
The Border style property is used to specify the border type which you want to display on the web page. There are some border style values which are used with border-style property to define a border.
    Value	                                Description
   ------- -------------------------------------------------------------------------------------
    none	It doesn't define any border.
    dotted	It is used to define a dotted border.
    dashed	It is used to define a dashed border.
    solid	It is used to define a solid border.
    double	It defines two borders wIth the same border-width value.
    groove	It defines a 3d grooved border. effect is generated according to border-color value.
    ridge	It defines a 3d ridged border. effect is generated according to border-color value.
    inset	It defines a 3d inset border. effect is generated according to border-color value.
    outset	It defines a 3d outset border. effect is generated according to border-color value.

Eg:    
    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        p.none {border-style: none;}  
        p.dotted {border-style: dotted;}  
        p.dashed {border-style: dashed;}  
        p.solid {border-style: solid;}  
        p.double {border-style: double;}  
        p.groove {border-style: groove;}  
        p.ridge {border-style: ridge;}  
        p.inset {border-style: inset;}  
        p.outset {border-style: outset;}  
        p.hidden {border-style: hidden;}  
    < /style >  
    < /head >  
    < body >  
        < p class="none">No border.< /p >  
        < p class="dotted">A dotted border.< /p >  
        < p class="dashed">A dashed border.< /p >  
        < p class="solid">A solid border.< /p >  
        < p class="double">A double border.< /p >  
        < p class="groove">A groove border.< /p >  
        < p class="ridge">A ridge border.< /p >  
        < p class="inset">An inset border.< /p >  
        < p class="outset">An outset border.< /p >  
        < p class="hidden">A hidden border.< /p >  
    < /body>  
    < /html >
Output :

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.


2. CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.
    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        p.one {  
        border-style: solid;  
        border-width: 5px;  
        }  
        p.two {  
            border-style: solid;  
            border-width: medium;  
        }  
        p.three {  
            border-style: solid;  
            border-width: 1px;  
        }        
    < /style >  
    < /head >  
    < body >  
        < p class="one">Write your text here.< /p >  
        < p class="two">Write your text here.< /p >  
        < p class="three">Write your text here.< /p > 
    < /body >  
    < /html > 
Output :

Write your text here.

Write your text here.

Write your text here.


3. CSS border-color
There are three methods to set the color of the border.
  • Name: It specifies the color name. For example: "red".
  • RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
  • Hex: It specifies the hex value of the color. For example: "#ff0000".
There is also a border color named "transparent". If the border color is not set it is inherited from the color property of the element.
    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        p.one {  
        border-style: solid;  
        border-color: red;  
        }  
        p.two {  
            border-style: solid;  
            border-color: #98bf21;  
        }          
    < /style >  
    < /head >  
    < body >  
        < p class="one">This is a solid red border< /p >  
        < p class="two">This is a solid green border< /p >  
    < /body >  
    < /html > 
Output :

This is a solid red border

This is a solid green border


4. CSS border-radius property
This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element.
It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element.
We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.This CSS property includes the properties that are tabulated as follows:
        Property	                                    Description
   ------------------------      -------------------------------------------------------------------
    border-top-left-radius	        It is used to set the border-radius for the top-left corner
    border-top-right-radius	        It is used to set the border-radius for the top-right corner
    border-bottom-right-radius	    It is used to set the border-radius for the bottom-right corner
    border-bottom-left-radius	    It is used to set the border-radius for the bottom-left corner

Eg: For Border Radius
    < !DOCTYPE html >  
    < html >  
    < head >  
    < title> CSS border-radius < /title>  
    < style>  
        div {  
            padding: 50px;  
            margin: 20px;  
            border: 6px ridge red;  
            width: 300px;  
            float: left;  
            height: 150px;  
        }  
        p{  
            font-size: 25px;  
        }  
        #one {  
            border-radius: 90px;  
            background: lightgreen;  
        }  
        #two {  
            border-radius: 25% 10%;  
            background: orange;  
        }  
        #three {  
            border-radius: 35px 10em 10%;  
            background: cyan;  
        }  
        #four {  
            border-radius: 50px 50% 50cm 50em;  
            background: lightblue;  
        }  
    < /style>  
    < /head>  
    < body>  
        < div id = "one">  
            < h2> Welcome to the TesDBAcademy < /h2>  
            < p> border-radius: 90px; < /p>  
        < /div>  
        < div id = "two">  
            < h2> Welcome to the TesDBAcademy < /h2>  
            < p> border-radius: 25% 10%; < /p>  
        < /div>  
            < div id = "three">  
            < h2> Welcome to the TesDBAcademy < /h2>  
            < p> border-radius: 35px 10em 10%; < /p>  
        < /div>  
        < div id = "four">  
            < h2>Welcome to the TesDBAcademy< /h2>  
            < p>border-radius: 50px 50% 50cm 50em;< /p>  
        < /div>  
    < /body>  
    < /html>      


Eg: border-top-left-radius
    < !DOCTYPE html>  
    < html>  
    < head>  
    < title> CSS border-radius < /title>  
    < style>  
        #left {  
            border-top-left-radius: 250px;  
            background: lightgreen;  
            padding: 50px;  
            border: 6px ridge red;  
            width: 300px;  
            height: 200px;  
            font-size: 25px;  
        }  
    < /style>  
    < /head>  
    < body>  
        < center>  
        < div id = "left">  
        < h2>Welcome to the TesDBAcademy< /h2>  
        < p>border-top-left-radius: 250px;< /p>  
        < /div>  
        < /center>  
    < /body>  
    < /html>  




Eg: border-top-right-radius
    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        #left {  
            border-top-right-radius: 50%;  
            background: lightgreen;  
            padding: 50px;  
            border: 6px ridge red;  
            width: 300px;  
            height: 200px;  
            font-size: 25px;  
        }  
    < /style>  
    < /head>  
    < body>  
        < center>  
        < div id = "left">  
        < h2>Welcome to the TesDBAcademy< /h2>  
        < p>border-top-right-radius: 50%;< /p>  
        < /div>  
        < /center>  
    < /body>  
    < /html> 


Eg: border-bottom-right-radius
    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        #left {  
            border-bottom-right-radius: 50%;  
            background: lightgreen;  
            padding: 50px;  
            border: 6px ridge red;  
            width: 300px;  
            height: 200px;  
            font-size: 25px;  
        }  
    < /style>  
    < /head>  
    < body>  
    < center>  
    < div id = "left">  
    < h2>Welcome to the TesDBAcademy< /h2>  
    < p>border-bottom-right-radius: 50%;< /p>  
    < /div>  
    < /center>  
    < /body>  
    < /html>  


Eg: border-bottom-left-radius
    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        #left {  
            border-bottom-left-radius: 50%;  
            background: lightgreen;  
            padding: 50px;  
            border: 6px ridge red;  
            width: 300px;  
            height: 200px;  
            font-size: 25px;  
        }  
    < /style>  
    < /head>  
    < body>  
    < center>  
    < div id = "left">  
    < h2>Welcome to the TesDBAcademy< /h2>  
    < p>border-bottom-left-radius: 50%;< /p>  
    < /div>  
    < /center>  
    < /body>  
    < /html> 


Using (/) symbol for horizontal and vetical
We can specify separate horizontal and vertical values by using the slash (/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash (/) are for the vertical radius.
    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        div{  
            padding: 50px;  
            border: 6px ridge red;  
            width: 300px;  
            margin: 20px;  
            font-weight: bold;  
            height: 175px;  
            float: left;  
            font-size: 25px;  
        }  
        #one {  
            border-radius: 10% / 50%;  
            background: lightgreen;  
        }  
        #two {  
            border-radius: 120px / 100px 10px;  
            background: lightblue;  
        }  
        #three {  
            border-radius: 50% 10em / 10% 20em;  
            background: lightpink;  
        }  
        #four {  
            border-radius: 100px 10em 120px / 30%;  
            background: cyan;  
        }  
    < /style>  
    < /head>  
    < body>  
        < center>  
            < div id = "one">  
                < h2>Welcome to the TesDBAcademy< /h2>  
                < p>border-radius: 10% / 50%; < /p>  
            < /div>  
            < div id = "two">  
                < h2>Welcome to the TesDBAcademy< /h2>  
                < p>border-radius: 120px / 100px 10px;< /p>  
            < /div>  
            < div id = "three">  
                < h2>Welcome to the TesDBAcademy< /h2>  
                < p>border-radius: 50% 10em / 10% 20em; < /p>  
            < /div>  
            < div id = "four">  
                < h2>Welcome to the TesDBAcademy< /h2>  
                < p>border-radius: 100px 10em 120px / 30%; < /p>  
            < /div>  
        < /center>  
    < /body>  
    < /html>  



CSS border-spacing properties
This CSS property is used to set the distance between the borders of the adjacent cells in the table. It applies only when the border-collapse property is set to separate. There will not be any space between the borders if the border-collapse is set to collapse.
It can be defined as one or two values for determining the vertical and horizontal spacing.
  • When only one value is specified, then it sets both horizontal and vertical spacing.
  • When we use the two-value syntax, then the first one is used to set the horizontal spacing (i.e., the space between the adjacent columns), and the second value sets the vertical spacing (i.e., the space between the adjacent rows).
Syntax:
    border-spacing: length | initial | inherit; 
Property Values :
The values of this CSS property are defined as follows.
  • length: This value sets the distance between the borders of the adjacent table cells in px, cm, pt, etc. Negative values are not allowed.
  • initial: It sets the property to its default value.
  • inherit: It inherits the property from its parent element.
  •     < !DOCTYPE html>  
        < html>  
        < head>  
        < title> border-spacing property < /title>  
        < style>  
            table{  
                border: 2px solid blue;  
                text-align: center;  
                font-size: 25px;  
                background-color: lightblue;  
            }  
            th{  
                border: 3px solid red;  
                background-color: yellow;   
            }  
            td{  
                border: 3px solid violet;  
                background-color: lightgreen; 
            }  
            #space{  
                border-collapse: separate;  
                border-spacing: 30px;  
            }  
        < /style>  
        < /head>  
        < body>  
            < h1> The border-spacing Property < /h1>  
            < h2> border-spacing: 30px; < /h2>  
            < table id = "space">  
            < tr>  
                < th> First_Name < /th>  
                < th> Last_Name < /th>  
                < th> Marks < /th>  
            < /tr>  
            < tr>  
                < td> HTML < /td>  
                < td> Hyper Text MarkUp Language< /td>    
                < td> 95 < /td>   
            < /tr>  
            < tr>  
                < td> CSS< /td>  
                < td> Cascading Style Sheet< /td>    
                < td> 87 < /td>  
            < /tr>  
            < tr>  
                < td> JS< /td>  
                < td> Javascript< /td>    
                < td> 98 < /td>  
            < /tr>  
            < /table>  
        < /body>  
        < /html>  
    
    Output :
    css-8

    border-radius :
    It is used to make the rounded corners of the button. It sets the border radius of the button.
    Syntax
        element {  
            // border-radius property  
        }  
    
    Eg:
        < !DOCTYPE html>    
        < html>      
        < head>    
            < title>button background Color< /title>   
            < style>   
                body{  
                    text-align: center;  
                }  
                button {  
                    color:black;  
                    font-size: 15px;   
                }   
                .b1 {   
                    background-color: red;   
                    border:none;  
                }   
                .b2 {   
                    background-color: blue;   
                    border:5px brown solid;  
                    border-radius: 5px;  
                }    
                .b3{  
                    background-color:orange;  
                    border: 5px red dashed;  
                    border-radius: 10px;  
                }  
                .b4{  
                    background-color: gray;  
                    border: 5px black dotted;  
                    border-radius: 20px;  
                }  
                .b5{  
                    background-color: lightblue;
                    border:5px blue double;
                    border-radius: 30px;
                }  
            < /style>
        < /head>
        < body>
            < h1>The border-radius property< /h1>
            < h2>Below there is the border name and border-radius< /h2>
            < button class="b1">none< /button>
            < button class="b2">solid 5px< /button>
            < button class="b3">dashed 10px< /button>
            < button class="b4">dotted 20px< /button>
            < button class="b5">double 30px< /button>
        < /body>    
        < /html> 
    
    Output :

    The border-radius property

    Below there is the border name and border-radius





    (CSS - Display Properties)