I got this simple css shape that should resemble a new moon, in chrome and firefox everything looks fine, but in safari the outline of the whole circle is visible - how can I make this new moon shape work in safari as well?
Img -> Current Safari result
.circle {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}
<div class="circle"></div>
This appears to be a bug in how webkit handles partial borders with border-radius set.
Here’s a method using box-shadow instead of borders, which I believe is visually similar:
.circle-box-shadow {
height: 50px;
width: 50px;
margin-left: 10px;
box-shadow: -10px 0 0 red;
border-radius: 50%;
}
.circle-border {
height: 50px;
width: 50px;
border-left: 10px solid red;
border-radius: 50%;
}
<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>
Tested in Chrome 70.0.3538.110 and Safari 12.0.1.
Related
I came across this problem, when I tried to use the leaflet markercluster plugin to display clusters in a map.
Here are two screenshots, one made in FF36 and the other in IE11
Firefox:
Internet Explorer:
Somehow it seems the border of the inner circle isn't displayed correctly.
I tried with background-clip and setting the border-color but that seemed to have no effect at all.
.circle {
width: 50px;
height: 50px;
border-radius: 25px;
background-color:rgb(181, 226, 140);
}
.circle div {
position: relative;
width: 30px;
height: 30px;
left: 10px;
top: 10px;
text-align: center;
border-radius: 15px;
background-color:rgb(111, 226, 140);
}
<div class="circle">
<div></div>
</div>
I have the following HTML:
<div class="body-content">
<fieldset class="EntryFieldSet">
<legend id="ScreeningTitle"> Screening:</legend>
<br/><br/>
</fieldset>
</div>
And the following CSS:
.body-content {
width: 300px;
border: 1px solid black;
background-color: #F5F5F5 /*whitesmoke*/;
}
.EntryFieldSet {
width: 250px;
padding-left: 15px;
overflow: hidden;
}
jsFiddle
In Internet Explorer, the right side is jagged
But it appears just fine in Chrome
How can I fix it for all browsers / internet explorer?
EDIT - This issue is happening for me in IE 9 64-bit edition
I think the best way would be to override the default css. Here is what worked for me
.EntryFieldSet {
border-radius: 0px;
-moz-border-radius: 0px;
border: solid 1px darkgray;
}
This way, it displays uniformly and with the same color across all the browsers
jsFiddle
I have improve the bug just a little bit..
.EntryFieldSet {
width: 250px;
padding-left: 15px;
overflow: hidden;
border-top-right-radius: 3px;
-webkit-top-right-radius: 3px;
-moz-border-top-right-radius: 3px;
border-top-right-radius: 0px\9;
border-top-right-radius: 0px\0/;
}
By applying a zero border-radius to the fieldset, I was able to get it to stop trying to apply one by browser default, so now it renders properly
.EntryFieldSet {
/* other properties */
-moz-border-radius: 0px;
border-radius: 0px;
}
jsFiddle
Example:
I want to display a part of image in circle div. I have a code, but it doesn't work in Opera.
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
}
img {
margin-left: -75px;
width: 350px;
height: 90px;
}
HTML:
<div>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>
http://jsfiddle.net/vpfEY/6/
How can I fix it?
Check border-radius support hear also check this
Looking at you code it seems working i have tested it on chrome, firefox and opera. and its working.
If you are using the older version try using
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
NOTE But this is not required for morden browsers
I am unsure why an image would not respect the border-radius property. However I was able to get it to work using a background image.
HTML
<div></div>
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}
http://jsfiddle.net/vpfEY/18/
hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>