The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

Get the values of properties in CSS using the calc() property. You can try to run the following code to implement the calc() function in CSSExampleLive Demo                    #demo {             position: absolute;             width: calc(100% - 100px);             background-color: blue;             text-align: center;          }                     Heading One       This is it!    

Use the border-bottom-left-radius property to set the border of the bottom left corner. You can try to run the following code to implement the border-bottom-left-radius propertyExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-left-radius: 45px;             background: blue;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

Use border-bottom-right-radius property for setting the border of bottom right corner. You can try to run the following code to implement border-bottom-right-radius propertyExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-right-radius: 90px;             background: #F5CBA7;             padding: 20px;             width: 400px;             height: 300px;          }                     Rounded border bottom corner!    

To implement animation on the border-right property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid yellow;             background-image: url('https://www.tutorialspoint.com/latest/testrail.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             40% {                background-color: maroon;                border-color: red;                border-right: 50px solid red;             }          }                     Performing Animation for right border          

To implement animation on border-left-color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid yellow;             border-bottom-right-radius: 100px;             border-bottom-width: 30px;             background-image: url('https://www.tutorialspoint.com/latest/testrail.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             40% {                background-color: maroon;                border-bottom-color: green;                border-bottom-right-radius: 50px;                border-bottom-width: 50px;                border-color: red;                border-left-color: lightblue;             }          }                     Performing Animation for border left color          

To implement animation on border-left property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid yellow;             border-bottom-right-radius: 100px;             border-bottom-width: 30px;             background-image: url('https://www.tutorialspoint.com/latest/testrail.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             40% {                background-color: maroon;                background-size: 90px;                border-bottom-color: green;                border-bottom-right-radius: 50px;                border-bottom-width: 50px;                border-color: red;                border-left: 10px dashed orange;             }          }                     Performing Animation for left border          

To implement animation on the border-color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid gray;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                border-color: red;             }          }                     Performing Animation for color of border          

To implement animation on the border-bottom-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid yellow;             border-bottom-right-radius: 100px;             border-bottom-width: 30px;             background-image: url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                background-color: maroon;                background-size: 90px;                border-bottom-color: green;                border-bottom-right-radius: 50px;                border-bottom-width: 50px;             }          }                     Performing Animation for bottom border width          

Use the @keyframes to animate the background position. To implement animation on background-position property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 400px;             background: yellow;             background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');             animation: myanim 3s infinite;             background-position: bottom left;          }          @keyframes myanim {             20% {                background-color: maroon;                background-position: bottom right;             }          }