To add rounded corners to a button, use the border-radius property.ExampleYou can try to run the following code to add rounded corners −Live Demo                    .button {             background-color: yellow;             color: black;             text-align: center;             font-size: 15px;             padding: 20px;             border-radius: 15px;          }                     Result       Click below for result:       Result    

Use the bottom CSS property to add arrow to the top of the tooltip.ExampleYou can try to run the following code to add a tooltip with arrow to the top:Live Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: 150%;          left: 50%;          margin-left: -60px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          bottom: 100%;          left: 50%;          margin-left: -10px;          border-width: 3px;          border-style: solid;          border-color: transparent transparent blue transparent;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

To center an image, use the margin-left, margin-right and block CSS properties. You can try to run the following code to center an imageExampleLive Demo                    img {             border: 2px solid orange;             border-radius: 3px;             padding: 7px;          }          img {             display: block;             margin-left: auto;             margin-right: auto;             width: 50%;          }                        

To make an image responsive, you can try to run the following code:ExampleLive Demo                    img {             max-width: 100%;             height: auto;          }                        

To display a shadow on image hover, use the CSS box-shadow propertyExampleLive Demo                    img {             border: 2px solid orange;             border-radius: 3px;             padding: 7px;          }          img:hover {             box-shadow: 0 0 2px 2px blue;          }                        

Whether in graphic design, photography, or even on a web page, adding shadows is a massive technique to create the appearance of depth and perspective. It is not necessary to open Photoshop or another visual editing program in order to apply this kind of effect to text, images, and other elements on a web page it can be done by using the CSS3 properties. You can make use of two properties. The majority of browsers support both of these features, they are listed below − text-shadow box-shadow Add the comma-separated list of shadows to add more than one ... Read More

Use Inline List Items to build a horizontal navigation bar. Set the elements as inline.ExampleYou can try to run the following code to create horizontal navigation bar:Live Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }                              Home          Company          Product          Services          Contact          

To create red neon glow shadow, use the text-shadow property. You can try to run the following code to achieve thisExampleLive Demo                    h1 {             text-shadow: 0 0 4px #FF0000;          }                     Heading One       Above heading has a read neon glow shadow effect.    

Use the text-shadow property to create white text with black shadow.You can try to run the following code to implement the text-shadow property:ExampleLive Demo                    h1 {             color: white;             text-shadow: 3px 3px 3px #000000;          }                     Heading One       Above heading has a text shadow effect.    

To fade in tooltip text with CSS, you can try to run the following code:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -5px;          right: 110%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;          opacity: 0;          transition: opacity 1s;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 150px;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          top: 50%;          left: 100%;          margin-top: -5px;          border-width: 6px;          border-style: solid;          border-color: transparent transparent transparent blue;       }       .mytooltip:hover .mytext {          visibility: visible;          opacity: 1;       }               Keep mouse cursor over me           My Tooltip text