Borders in CSS

What is a border?

  • CSS border properties allow you to set the border around the HTML elements.

  • We can use different properties for the border. Like border color, width, style, etc.

  • Also, we can make a border corner rounded with the help of border-radius.


Border Properties

border-color: border-color is used to set the color of the border. 

border-radius: The border-radius property is used to set the radius of the border corners.

border-style: The border-style property defines what type of border will be displayed. Now let's see some border-style values:


This index.html file will be our boilerplate code and we will add all border properties on .para.

index.html 

<!DOCTYPE html>
<html>

<head>
    <title> Backgrounds in CSS </title>
    <style>
        .para {
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <p class="para"> This is a paragraph </p>
</body>

</html>


Border Style Values

i) dotted - Used to set a dotted border. 

.para {
        border-style: dotted;
   }

This is a dotted border paragraph


ii) dashed - It defines a dashed border.

.para {
        border-style: dashed;
   }

This is a dashed border paragraph


iii) solid - Defines a solid border.

.para {
        border-style: solid;
   }

This is a solid border paragraph


iv) double - Defines a double border.

.para {
        border-style: double;
   }

This is a double border paragraph


v) groove - Groove defines a 3D grooved border. The effect depends on the border-color value.

.para {
        border-style: groove;
   }

This is a groove border paragraph


vi) ridge - It defines a 3D ridged border. The effect depends on the border-color value.

.para {
        border-style: ridge;
   }

This is a ridge border paragraph


vii) inset - Defines a 3D inset border. The effect depends on the border-color value.

.para {
        border-style: inset;
   }

This is an inset border paragraph


viii) outset - It defines a 3D outset border. The effect depends on the border-color value.

.para {
        border-style: outset;
   }

This is an outset border paragraph


ix) none - Defines no border.

.para {
        border-style: none;
   }

This is a no-border paragraph


x) hidden - Defines a hidden border.

.para {
        border-style: hidden;
   }

This is a hidden border paragraph




CSS Border Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> CSS Borders </title>
    <style>
        p{
            border-color: red;
            border-width: 2px;
            border-style: solid;
        }
    </style>
</head>
<body>
    <p> This is red border paragraph</p>
</body>

</html>

Output:

This is a paragraph


Borders in CSS Part-7 PDF

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section