I'm working on a basic div
and for some peculiar reason, border-radius: 7px
isn't applying to it.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px; // not working
}
I'm working on a basic div
and for some peculiar reason, border-radius: 7px
isn't applying to it.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px; // not working
}
To whomever may have this issue. My problem was border-collapse. It was set to:
border-collapse: collapse;
I set it to:
border-collapse: separate;
and it fixed the issue.
For anyone who comes across this issue in the future, I had to add
perspective: 1px;
to the element that I was applying the border radius to. Final working code:
.ele-with-border-radius {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
}
overflow: hidden
property does the job for most of the containers.
Apr 27, 2018 at 10:50
To add a bit on to @ethanmay 's answer: (https://stackoverflow.com/a/44334424/8479303)...
If there are contents within the div that has the curved corners, you have to set overflow: hidden
because otherwise the child div's overflow can give the impression that the border-radius
isn't working.
<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
<div style="background: red;">
text!
</div>
</div>
<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
<div style="background: red;">
text!
</div>
</div>
JSFiddle: http://jsfiddle.net/o2t68exj/
Im just highlighting part of @Ethan May answer which is
overflow: hidden;
It would most probably do the work for your case.
if you have parent element than your parent element must have overflow: hidden; property because if your children content is getting oveflowed from parent border than your border will be visible .otherwise your borderradius is working but it is hide by your children content.
.outer {
width: 200px;
height: 120px;
border: 1px solid black;
margin-left: 50px;
overflow: hidden;
border-radius: 30px;
}
.inner1 {
width: 100%;
height: 100%;
background-image: linear-gradient(#FF9933,white, green);
border: 1px solid black;
}
<div class="outer">
<div class="inner1">
</div>
</div>
For some reason your padding: 7px setting is nullifying the border-radius. Change it to padding: 0px 7px
Try add !important to your css. Its working for me.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px!important;
}
in your div class="social-box" css
use
float:right
instead of
float:left
float: initial
in the browser, which solved my problem. Then I've noticed, that after removing that property it works as well, I think in my case the problem in the browser: Chrome Version 55.0.2883.87 (64-bit)
Jan 11, 2017 at 15:26
Your problem is unrelated to how you have set border-radius
. Fire up Chrome and hit Ctrl+Shift+j
and inspect the element. Uncheck width
and the border will have curved corners.
Now I am using the browser kit like this:
{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
For my case, I have a dropdown list in my div container, so I can not use overflow: hidden
or my dropdown list will be hidden.
Inspired by this discussion: https://twitter.com/siddharthkp/status/1094821277452234752
I use border-bottom-left-radius
and border-bottom-right-radius
in the child element to fix this issue.
make sure you add it the correct value for each child separately
position: absolute
container cutting dropdowns because of an overflow: hidden
needed by my container to have a working border-radius
. I removed the overflow: hidden
and applied a selective border radius on each corner elements as suggested. Worked perfectly for me.
you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this
// style file
<link rel="stylesheet" href="css/style.css" />
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
the right way is this
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
// style file
<link rel="stylesheet" href="css/style.css" />
I had to add display: block
in my case to make it work, the essential part being that the display must not be inlined; so the element had the following:
overflow: hidden;
display: flex;
border-radius: 0.5rem;
(note: it also works with display: block
)
See for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow