You can see this in safari browser on border top white lines. How can I solve this?
CODE:
CSS
.row-number5{
border-radius: 100%;
min-width: 1.25em;
max-width: 1.25em;
height: 1.1em;
padding: 0.55em;
border-style: none;
border-bottom-style: dotted;
border-bottom-color: cornsilk;
align-self: center;
border-width: 0px 0px 3px 0px;}
HTML
<div class="row"><div class="row-number5">5# </div></div>
Safari
Opera(You can see works perfectly in Opera Browser.)
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.
The right corner borders are cutting by a textarea that has a scrollbar. It only happens in IE11, other browsers are working fine.
This is the CSS:
textarea {
border: 1px solid black;
border-radius: 4px;
height: 100px;
}
See this Fiddle and this
I would have thought that some padding would fix it. Something like:
textarea{
border: 1px solid black;
border-radius: 4px;
height: 100px;
padding: 10px;
}
It looks fine to me in Chrome. I would test it in IE, but I'm on a Macbook.
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:
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>