Geek Answers Handbook

Css How to add round corners when hover li element?

I want to add round corners to the li element when hovering:

My HTML:

<ul> <li id="menufirst"> <span id="menu1"></span> <a href="#">Menu 1</a> </li> <li> <span id="menu2"></span> <a href="#">Menu 2</a> </li> <li> <span id="menu3"></span> <a href="#">Menu 3 </a> </li> </ul>

An example I want to archive: enter image description here

I already have CSS to make the menu horizontal.

+4
source share
2 answers
 li:hover{ -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; background-color: #000; } li{ width: 50px; height: 50px; margin: 30px; float: left; padding: 10px; } li a{ color: #0070C0; font-size: 14px; text-decoration: none; }
+4
source

You can write this code:

 <div style="width:400px;height:300px;-webkit-border-radius: 71px;-moz-border-radius: 71px;border-radius: 71px;background-color:#E3934D;"> Just modify width and height values to get what you need... </div>

You can visit here for further explanation and functionality.

+5
source

More articles:


All Articles