6/16/21

CSS Tutorials : CSS Border Property


Hey Friends, in the last tutorial we have seen about the CSS background property. Now, this tutorial is based on CSS Border Property. So let’s begin...

CSS Border Property

The CSS border property is a property that is used to set the border of Html elements. This property is used to specify the color, style and the size of the border of an element. There are some border property shown below:-

  1. Border-color
  2. Border-style
  3. Border-radius
  4. Border-width

Now we are going to discuss these properties in detail.

1) Border Color CSS Property

This border property is used to specify the color of the border. There are 3 methods to set the color of the border these are:- 

  1. Name:- It Specifies the name of the color. For Example:- “Red”, “Yellow” etc
  2. RGB :- It Specifies the RGB value of the color. For Example :- rgb(0,0,0,0), rgb(1,8,6,2.5) etc
  3. Hex :- It Specifies the hex decimal value of the color. For Example :- #ff000, #f2f2f2 etc

Example:- 

    
<style>
        body{
            displayflex;
            
        }
        div{
            margin10px;
        }
        #first {
            border-stylesolid;
           border-colorred;
            width23%;
            height20%;
        }

        #second {
            border-stylesolid;
            border-colorrgb(00,0);
            width23%;
            height20%;
        }

        #third{
            border-stylesolid;
            border-color#7f23d4;
            width23%;
            height20%;
        }
    </style>

Output:- 

2) Border Style CSS Property 

This CSS Border Style Property is used to specify the border type which you want to display in your Html file. There is a lot of border-style value from where you can select the different types of border style to border an element. 

  • None
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Inset
  • Outset
  • Ridge

Example:-

<html>
<head>
    <title> CSS Border Property </title>
<style>
    p.none {border-stylenone;}  
    p.dotted {border-styledotted;}  
    p.dashed {border-styledashed;}  
    p.solid {border-stylesolid;}  
    p.double {border-styledouble;}  
    p.groove {border-stylegroove;}  
    p.ridge {border-styleridge;}  
    p.inset {border-styleinset;}  
    p.outset {border-styleoutset;}  
    p.hidden {border-stylehidden;}
</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:- 

3) Border Width CSS Property

This property is used to set the width or the border. It is set in pixels. You can also select from pre-defined values like - thin, thick, and medium

Note: - This property is not worked alone means you have to use border-style property first then you can set the width of the border.

Example:- 

<html>
<head>
    <title> CSS Border Property </title>
    <style>
        body{
            displayflex;
            
        }
        div{
            margin10px;
        }
        #first {
            border-stylesolid;
           border-colorred;
           border-width1px;
            width23%;
            height20%;
        }

        #second {
            border-stylesolid;
            border-colorrgb(00,0);
            border-widththick;
            width23%;
            height20%;
        }

        #third{
            border-stylesolid;
            border-color#7f23d4;
            border-width10px;
            width23%;
            height20%;
        }
    </style>
</head>

<body>
    <div id="first">
        Lorem ipsum dolor sit, id, ab aspernatur officiis, hmagnam atque pariatur alias iure itaque facere placeat
        nesciunt enim odit corporis? Provident.
    </div>
    <br>
    <br>
    <div id="second">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab pariatur modi amet deleniti, quisquam alias
        accusantium ipsa veritatis! Voluptate delectus nihil veritatis facere autem voluptatum et!
    </div>
<br><br>
    <div id="third">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, qui. 
    </div>
</body>
</html>

Output:- 

So Friend that’s all for this tutorial as you can see I have told only three property border-style, border-color, & border-width the last property is border-radius. We will discuss it in the next tutorial because the content of this property is very large so I thought that I have to make a separate tutorial on this topic.  

People Also Read :- CSS Background Property 

People Also Read :- How to Add CSS in HTML File.

0 comments:

Post a Comment

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.