CODEWITHSUNDEEP
css
Rails beginner
Rails beginner

Reputation: 14514

Css How to add round corners when hover li element?

I want to add round corners to a li element when hovered:

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>

Example of want I want to archive: enter image description here

I already have some CSS to make the menu horizontal.

Upvotes: 7

Views: 21437

Answers (2)

ScoRpion
ScoRpion

Reputation: 11474

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

Upvotes: 5

Riz
Riz

Reputation: 10246

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;
}

Upvotes: 8

Related Questions