borders and background in html while using css

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Height, width, borders and backgrounds</title>

    <style>

        #firstPara {

            background-color: red;

            height: 100px;

            width: 455px;

            border: 4px solid green;

            /* border-width: 4px;

          border-color: green;

          border-style: solid; */

            border-radius: 11px;

        }

        #secondPara {

            background-color: rgb(28, 235, 73);

            height: 100px;

            width: 455px;

            border-top: 2px solid violet;

            border-right: 2px solid rgb(219, 15, 134);

            border-bottom: 2px solid rgb(1100, 4, 4);

            border-left: 2px solid rgb(44, 4, 97);

            border-top-left-radius: 4px;

            border-top-right-radius: 14px;

            border-bottom-left-radius: 8px;

            border-bottom-right-radius: 24px;

        }

        #thirdPara {

            height: 200px;

            width: 455px;

            background-image: url('https://codewithharry.com/static/home/img/photo.png');

            border: 2px solid red;

            background-repeat: no-repeat;

            background-position: center center;

        }

    </style>

</head>

<body>

    <h3>This is heading</h3>

    <p id="firstPara">This is Paragraph</p>

    <h3>This is second heading</h3>

    <p id="secondPara">This is my second Paragraph</p>

    <h3>This is third heading</h3>

    <p id="thirdPara">This is my third Paragraph</p>

</body>

</html>