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

To implement animation on the border-top-left-radius property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-spacing: 50px;                border-top-color: red;                border-top-left-radius: 150px;             }          }                     Performing Animation for border top left radius                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

Use the grid-auto-columns property to set a default size for columns.You can try to run the following code to implement the grid-auto-columns property with CSSExampleLive Demo                    .container {             display: grid;             grid-auto-columns: 100px;             grid-gap: 10px;             background-color: blue;             padding: 10px;          }          .container>div {             background-color: #E5E7E9;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the align-content property with value center to set the flex lines to the center.You can try to run the following code to implement the center valueExampleLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: red;             align-content: center;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: yellow;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the align-content property with value space-around to add space around the flex lines.You can try to run the following code to implement the space-around valueExampleLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: #884EA0;             align-content: space-around;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: #00FF00;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Set a linear gradient as the background image, with linear-gradient() CSS function. You can try to run the following code to implement linear-gradient() function in CSSExampleLive Demo                    #demo {             height: 200px;             background: linear-gradient(green, orange, maroon);          }                     Setting background as linear gradient.          

With grid-row property, set the size of grid items. It has grid-row-start and grid-row-end properties. You can try to run the following code to implement the CSS grid-row property.ExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-row: 1 / 6;          }                     Game Board                1          2          3          4          5          6          

Set the following properties with the grid property: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow property.ExampleYou can try to run the following code to implement the CSS grid propertyLive Demo                    .container {             display: grid;             grid: 100px / auto auto;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Use the order property to set the order of the flex itemsYou can try to run the following code to implement the CSS order property −ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                  Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

To implement animation on font-weight property with CSS, you can try to run the following codeExampleLive Demo                    p {             border: 2px solid black;             width: 400px;             height: 100px;             animation: myanim 5s infinite;          }          @keyframes myanim {             70% {                font-weight: bold;             }          }                     This is demo text