Div doesn't apply border-radius property
I have a <div> tag, on which I need a bottom border and border radius to be applied, but it won't work.
.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>So basically it shows up like that :
So my problem is :
I have a page on my website, which contains many <div>. Each div as a .part1, .part2 etc.. class on them. I need the borders of each .partX div to have a curved border bottom. It works for the header, it works for .part4, but it doesn't work for .part3. That's the mystery, and I'm trying to solve it. I need to have the border of div.part3 curved, so I'm using border radius, but it doesn't work at all. Why ?
Above is the result of the css code I used. As you can see the border is straight, I need it curved.
html css border
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
|
show 4 more comments
I have a <div> tag, on which I need a bottom border and border radius to be applied, but it won't work.
.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>So basically it shows up like that :
So my problem is :
I have a page on my website, which contains many <div>. Each div as a .part1, .part2 etc.. class on them. I need the borders of each .partX div to have a curved border bottom. It works for the header, it works for .part4, but it doesn't work for .part3. That's the mystery, and I'm trying to solve it. I need to have the border of div.part3 curved, so I'm using border radius, but it doesn't work at all. Why ?
Above is the result of the css code I used. As you can see the border is straight, I need it curved.
html css border
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
1
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Try removing the.homeselector from your CSS to show the problem.
– Paulie_D
Nov 14 '18 at 16:30
1
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37
|
show 4 more comments
I have a <div> tag, on which I need a bottom border and border radius to be applied, but it won't work.
.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>So basically it shows up like that :
So my problem is :
I have a page on my website, which contains many <div>. Each div as a .part1, .part2 etc.. class on them. I need the borders of each .partX div to have a curved border bottom. It works for the header, it works for .part4, but it doesn't work for .part3. That's the mystery, and I'm trying to solve it. I need to have the border of div.part3 curved, so I'm using border radius, but it doesn't work at all. Why ?
Above is the result of the css code I used. As you can see the border is straight, I need it curved.
html css border
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
I have a <div> tag, on which I need a bottom border and border radius to be applied, but it won't work.
.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>So basically it shows up like that :
So my problem is :
I have a page on my website, which contains many <div>. Each div as a .part1, .part2 etc.. class on them. I need the borders of each .partX div to have a curved border bottom. It works for the header, it works for .part4, but it doesn't work for .part3. That's the mystery, and I'm trying to solve it. I need to have the border of div.part3 curved, so I'm using border radius, but it doesn't work at all. Why ?
Above is the result of the css code I used. As you can see the border is straight, I need it curved.
.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>.part2
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 60px;
background-color: #fafafa;
.part3
background-color: #EFEFEF;
border-color: pink;
border-style: solid;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0px;
padding-bottom: 100px;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>html css border
html css border
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
edited Nov 14 '18 at 16:35
Mael Landrin
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
asked Nov 14 '18 at 16:16
Mael LandrinMael Landrin
347
347
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
1
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Try removing the.homeselector from your CSS to show the problem.
– Paulie_D
Nov 14 '18 at 16:30
1
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37
|
show 4 more comments
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
1
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Try removing the.homeselector from your CSS to show the problem.
– Paulie_D
Nov 14 '18 at 16:30
1
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
1
1
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Try removing the
.home selector from your CSS to show the problem.– Paulie_D
Nov 14 '18 at 16:30
Try removing the
.home selector from your CSS to show the problem.– Paulie_D
Nov 14 '18 at 16:30
1
1
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37
|
show 4 more comments
1 Answer
1
active
oldest
votes
I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).
However, most of this could be consolidated;
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>Hope this helps, cheers.
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304536%2fdiv-doesnt-apply-border-radius-property%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).
However, most of this could be consolidated;
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>Hope this helps, cheers.
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
add a comment |
I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).
However, most of this could be consolidated;
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>Hope this helps, cheers.
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
add a comment |
I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).
However, most of this could be consolidated;
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>Hope this helps, cheers.
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
I can only assume there's some bad practices further up the style inheritance tree. Without seeing more of the layout to inspect it's hard to tell why one works and the other doesn't but I'd bet if you inspected them in the developer console and paid attention to the order of inception of the style classes you could find your culprit(s).
However, most of this could be consolidated;
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>Hope this helps, cheers.
.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>.part2, .part3, .part4
border-width: 0; /* Not 0px */
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
.part2
padding-bottom: 60px;
background-color: lightblue;
.part3
background-color: #EFEFEF;
border: pink 5px solid;
padding-bottom: 100px;
.part4
padding-bottom: 60px;
background-color: #0f0;
border: orange 5px solid;
<div class="part2 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part3 col-md-12 col-lg-12 p-t-40">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="part4 col-md-12 col-lg-12">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
answered Nov 14 '18 at 16:35
Chris W.Chris W.
15.8k23571
15.8k23571
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304536%2fdiv-doesnt-apply-border-radius-property%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
– Paulie_D
Nov 14 '18 at 16:22
I just added clarification on the problem
– Mael Landrin
Nov 14 '18 at 16:26
1
Your code does NOT demonstrate the issue.
– Paulie_D
Nov 14 '18 at 16:27
Try removing the
.homeselector from your CSS to show the problem.– Paulie_D
Nov 14 '18 at 16:30
1
The white divs border is there....it's just white. Change it to something else and you'll see,
– Paulie_D
Nov 14 '18 at 16:37