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