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

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Borders and Background in CSS </title>
        body {
            background-image: url('');
            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;

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


Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section