CODEWITHSUNDEEP
css
user3682234
user3682234

Reputation: 33

CSS Bottom Border Issues

I was hoping someone could give me some advice on getting rid of the bottom right corner triangles in the nav below. Keeping both the bottom border and white border left after each. thanks!!

Sample image

CSS Code

#top-menu ul{
  width:100%;
  float:left;
  padding:0 0 10 0;
  color:#666666;
  margin-left:64.5%;
  margin-top:0px;
  list-style-type:none;
}

#top-menu ul a {
  float:left;
  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding:0.2em 0.9em;
  border-bottom: 3px solid #B2DEFC;
  border-right: 3px solid white;
}


#top-menu a:hover {
  background-color:#C957BB;   
}

here is my Fiddle

Upvotes: 0

Views: 152

Answers (4)

apaul
apaul

Reputation: 16180

This may seem unrelated, but bear with me...

https://meta.stackexchange.com/a/210715/217863

enter image description here

That's just the way that borders are rendered on a large scale.

Of course if you're just looking for a workaround...

You could cover the bottom border and unwanted corners with a pseudo-element like so:
Working Example 

div:after {
    content:"";
    display:inline-block;
    position: relative;
    top: 100px;
    background: none repeat scroll 0% 0% #808080;
    height: 20px;
    width: 140px;
    left: -20px;
}

Upvotes: 0

Tushar
Tushar

Reputation: 4418

Check if this helps you. DEMO

Give the border to li

#top-menu ul li {
      border-bottom: 3px solid #B2DEFC;
    margin-right: 3px;
    float:left;
  }

Upvotes: 0

Karuppiah RK
Karuppiah RK

Reputation: 3964

Remove your border-right: 3px solid white; in your #top-menu ul a and use a margin instead.

JsFiddle

CSS

#top-menu ul a {
  float:left;
  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding:0.2em 0.9em;
  border-bottom: 3px solid #B2DEFC;
  margin: 10px;
}

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10285

bottom right corner is in triangles shape because of border-right with color. Now removing the border:right there will be no space between items. so you can use display:inline-block; to give some distance between Items. In addition you are using float:left many times which really not required in this case.

Check the DEMO.

#top-menu ul{
  width:100%;
  color:#666666;
  list-style-type:none;
}

#top-menu li{ display:inline-block;}

#top-menu ul li a {

  text-decoration:none;
  color:#ffffff;
  background-color:#5aa1e3;
  padding: 1em;
  border-bottom: 5px solid #B2DEFC;
}


#top-menu a:hover {
  background-color:#C957BB;   
}

Upvotes: 0

Related Questions