Round Border on Li’s


Simple Example for Beginners

 

HTML CODE

<div class="text-right">
<ul class="leftToRight">
	<li>1</li>
	<li>2</li>
	<li class="active">3</li>
	<li>4</li>
	<li>5</li>
</ul>
</div>
<ul class="leftToRight setToRight">
	<li>5</li>
	<li>4</li>
	<li>3</li>
	<li class="active">2</li>
	<li>1</li>
</ul>

 

CSS CODE

* {
  margin: 0;
  padding: 0;
}
.text-right{ text-align:right; }
li {
  list-style: none;
}

.leftToRight {
  font-size: 0;
  background-color: #dde2e8;
  display: inline-block;
  border-radius: 50px 0 0 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.leftToRight li {
  font-size: 20px;
  float: left;
  border-radius: 50px 0 0 0;
  background-color: #dde2e8;
  padding: 10px 30px;
  position: relative;
}

.leftToRight li:hover,
.leftToRight li.active {
  background-color: red;
  color: #ffffff;
}

.leftToRight li.active:after,
.leftToRight li:hover:after {
  content: '';
  height: 100%;
  width: 100%;
  margin: 0;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 100%;
  background-color: red;
}

.leftToRight.setToRight {
  border-radius: 0 50px 0 0;
}

.leftToRight.setToRight li {
  border-radius: 0 50px 0 0;
  float:right;
}

.leftToRight.setToRight li.active:after,
.leftToRight.setToRight li:hover:after {
  left: -100%;
}

 

Js Fiddle Example

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s