CODEWITHSUNDEEP
htmlcss
jamez88
jamez88

Reputation: 585

Inner div with background doesn't affected by outer div with border-radius

I applied border with border-radius to li. The background applied to a. The issue is that the a corners are still showing up.

Is there any solutions you can think of aside from the following?

Two possible solutions:

  1. Use overflow:hidden. This solution doesn't apply to my current layout so I need other solution.

  2. Apply border-radius to both li and a. This is my only solution at this moment but I need at least to lessen css codes on my project...

note: the tab layout is pixel perfect so I am using this method.

Fiddle here. 

body {
  background:#eee
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}
<ul>
    <li class="active"><a href="#">tab 1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
  </ul>
  <div class="content"></div>

Upvotes: 2

Views: 82

Answers (3)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

If you don't want to edit styles of "a" so a solution is to force children to inherit parents styles:

ul li * {border-radius:5px 5px 0 0;}

Upvotes: 0

bpeterson76
bpeterson76

Reputation: 12870

Fiddle

body {
  background:#eee
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}
ul li.active a {
  background:#fff;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

Upvotes: 1

bjb568
bjb568

Reputation: 11498

The only way is to apply the border-radius to both parent and child. I don't think this is a major problem tho, it doesn't look like you have too much CSS.

I guess you can reduce the amount of CSS by using two selectors separated by a , if you aren't doing that already.

If you don't need the background to be specifically on the child anchor, you can do as @Phylogenesis said and apply it to the parent.

Upvotes: 0

Related Questions