CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
iftheshoefritz
iftheshoefritz

Reputation: 6129

border:none does not remove bottom border from panel default

I'm using Bootstrap 3 and I have a div with class panel panel-default. After setting style="border:none", why is there still a faint grey border on the bottom of my panel? How do I get rid of it?

<body>
  <div class="panel panel-default" style="border: none">    
    test this
  </div>
</body>

Fiddle here

Upvotes: 3

Views: 3618

Answers (3)

Hive7
Hive7

Reputation: 3675

The small border that you can see is a box-shadow. Set box-shadow to none and the line disappears as demonstrated here:

http://jsfiddle.net/Hive7/Pys9B/6/

Upvotes: 0

TechYogi
TechYogi

Reputation: 371

@Fritz Meissner It's not a issue of border, But box shadow causing this.

Try this

.panel, .route-blurb-container {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Upvotes: 11

Florian Bussmann
Florian Bussmann

Reputation: 436

There is still a box-shadow in .panel, .route-blurb-container

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

Remove it to get rid of that faint grey border on the bottom. Updated fiddle here.

Upvotes: 0

Related Questions