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