Border and Background in CSS


What is border in CSS?

  • The CSS Border property 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 rounded corner border with the help of border-radius.


Border Properties

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

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

border-style: This border property defines what type of border will be displayed.


Now let's see some border-style values:

Border Style Values

i) dotted: This border style property is used to set a dotted border.

.para {
        border-style: dotted;
   }


ii) dashed: This property defines a dashed border.

.para {
        border-style: dashed;
   }


iii) solid: This property define a solid border.

.para {
        border-style: solid;
   }


iv) double: This border style property defines a double style border.

.para {
        border-style: double;
   }


v) groove: This border style property defines a 3D grooved border. The effect depends on the border-color value.

.para {
        border-style: groove;
   }


vi) ridge: This border style property defines a 3D ridged border. The effect depends on the border-color value.

.para {
        border-style: ridge;
   }


vii) inset: This property defines a 3D inset border. The effect depends on the border-color value.

.para {
        border-style: inset;
   }


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

.para {
        border-style: outset;
   }


ix) none: This border style property is used to define no border.

.para {
        border-style: none;
   }


x) hidden: This border style property defines a hidden border.

.para {
        border-style: hidden;
   }

What is background in CSS?

  • The CSS Background property is used to add background to the HTML elements.
  • Using CSS backgrounds you can add background images, and background colors to the HTML elements.
  • Now, let's see different way to add backgrounds:


Background Color

  • We can add background color using color name, hex value, or RGB value.
  • In this example, we will use predefined color names like red, green, blue, purple, orange, etc. to set background color.

.para {
         background-color: green;
         color: white;
}


Background Image

  • We can also add images as a background in HTML elements

  • To set images as background we will use the background-image property.

.para {
background-image: url('background.jpg');
}


Background Properties

i) background-position: The background-position property is used to set the position of the background.

ii) background-repeat: The background-repeat property is used to set the background repetition.

iii) background-size: The background-size property is used to set size of the background.

iv) background-attachment: The background-attachment property is used to sets whether a background image's position is fixed within the viewport.

v) background-origin: The background-origin property specifies the origin position of the background.


Background Shorthand Property

.para {
    background: #fafafa url('background.jpg') no-repeat right top;
 }


Code Described in the video

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Borders and Background in CSS </title>
    <style>
        body {
            background-image: url('https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
        }

        /* Borders */
        #firstPara {
            /* border-width: 2px;
            border-color: black;
            border-style: dashed; */
            /* border: 2px dashed black; */
            /* border-radius: 10px; */
            /* border-top-left-radius: 10px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 5px; */
            color: #fff;
            border-top: 2px solid red;
            border-bottom: 2px solid rgb(4, 253, 0);
            border-left: 2px solid rgb(245, 253, 0);
            border-right: 2px solid rgb(0, 60, 255);
        }

        /* Background */
        #secondPara {
            height: 300px;
            width: 300px;
            background-color: yellow;
            background-image: url('./assets/geekhelpIcon.png');
            background-size: cover;
        }
    </style>
</head>

<body>
    <p id="firstPara"> This is a paragraph</p>
    <p id="secondPara"> This is another paragraph</p>
</body>

</html>



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