This property specifies a pause to be observed before speaking an element's content. The possible values aretime − Expresses the pause in absolute time units (seconds and milliseconds).percentage − Refers to the inverse of the value of the speech-rate property. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-before of 100% means a pause of 500 ms and a pause-before of 20% means 100ms.

This property is a shorthand for setting pause-before and pause-after. If two values are given, the first value is pause-before and the second is pause-after.ExampleLet us see an example of pause property in CSS −    

The CSS background property is used to set all the background image properties in one section.ExampleYou can try to run the following code to implement the background property:Live Demo                    #demo {             background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top;          }                              www.tutorialspoint.com          Tutorials Point originated from the idea that there exists a             class of readers ... Read More

Wave effect is used to give the object a sine wave distortion to make it look wavy.The following parameters can be used in this filterS.NoParameter & Description1AddA value of 1 adds the original image to the waved image, 0 does not.2FreqThe number of waves.3LightThe strength of the light on the wave (from 0 to 100).4PhaseAt what degree the sine wave should start (from 0 to 100).5StrengthThe intensity of the wave effect.ExampleYou can try to run the following code to set wave effect −Live Demo                         Text Example:       CSS Tutorials    

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 property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-left-radius: 45px;             background: blue;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

To implement Fade Out Right Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutRight {             0% {                opacity: 1;                -webkit-transform: translateX(0);             }             100% {                opacity: 0;                -webkit-transform: translateX(20px);             }          }          @keyframes fadeOutRight {             0% {                opacity: 1;                transform: translateX(0);             }             100% {                opacity: 0;                transform: translateX(20px);             }          }          .fadeOutRight {             -webkit-animation-name: fadeOutRight;             animation-name: fadeOutRight;          }          animation-name: fadeOutLeft;                               Reload page                function myFunction() {             location.reload();          }          

Use border-bottom-right-radius property for setting the border of the bottom right corner. You can try to run the following code to implement border-bottom-right-radius property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-right-radius: 45px;             background: orange;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

Use the border-top-right radius property in CSS to set the top right radius border. You can try to run the following code to implement border-top-right-radius property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-top-right-radius: 45px;             background: orange;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

To implement Fade Down Left Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutLeftBig {             0% {                opacity: 1;                -webkit-transform: translateX(0);             }             100% {                opacity: 0;                -webkit-transform: translateX(-2000px);             }          }          @keyframes fadeOutLeftBig {             0% {                opacity: 1;                transform: translateX(0);             }             100% {                opacity: 0;                transform: translateX(-2000px);             }          }          .fadeOutLeftBig {             -webkit-animation-name: fadeOutLeftBig;             animation-name: fadeOutLeftBig;          }                           Reload page                function myFunction() {             location.reload();          }          

Use the border-radius property to set four border-radius property. You can try to run the following code to implement border-radius property −ExampleLive Demo                    #rcorner {             border-radius: 25px;             background: #8AC007;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!