CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Khrys
Khrys

Reputation: 2774

Bottom rounded corners broken in Bootstrap after custom css

I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect.

With 3.2.0:

enter image description here

With 3.1.1:

enter image description here

I just found if I add the following line:

background-color: #ffffff !important;

and changing the:

padding: 15px;

to

padding: 0px;

to the class:

.panel-body

it breaks the inferior round corners.

How can I force the panel-body to have a white background and 0px padding?

http://jsfiddle.net/Khrys/730sjq8n/

Upvotes: 1

Views: 1101

Answers (1)

chdltest
chdltest

Reputation: 873

Add the following style:

.panel-body {
  border-radius: 4px;
}

The issue was that while you gave the container a border and a border-radius, you had the content within the container a background of white with no border-radius. Therefore, you had a round box with a square block inside it, thus cutting off the border slightly.

Add a border radius to the content allowed the content to fit inside your container.

Alternatively, you can remove the background color:

.panel-body { background-color: transparent;
}

That would also be a fix.

Upvotes: 4

Related Questions