I'm using a 15px rounded border on a div, and the border itself is rounded on the outside but on the inside (where border meets background) it's still a square corner.
Example: http://jsfiddle.net/BQT5F/1/
I thought background-clip would help out here but it doesn't. This should be possible, right?
(Also, I know it's not IE compatible, I'm just aiming for chrome and FF for the moment)
To get a rounded inner border, the border radius must be greater than the border thickness. For example:
border-radius: 30px;
border-width: 15px;
Related
*EDIT
I jumped the gun a little bit, its the border-bottom that causes it.
New question:
Can you remove the picture frame effect from borders?
So i have this CSS code on a div:
border-left: 5px solid #009933;
It displays fine in Safari:
But it displays like this in Firefox and Chrome:
So i guess my question is, why does Firefox and Chrome display it differently and how can i make it look like Safari displays it?
Thanks
The exact rendering of border corners differ between browsers.
With thick borders, the browser tries to make a diagonal boundary between the borders. The pixels right in the corner can get the color from one of the borders:
******************
+*****************
++****************
+++***************
++++
++++
++++
or the other border:
+*****************
++****************
+++***************
++++**************
++++
++++
++++
Different browsers will use either of those two approaches, but differently on all four corners of the element. I once compared what different browsers use, and it almost seemed like each browser vendor went out of their way to pick an approach that no other browser used.
In your case Firefox and Chrome happen to use the horizontal border color for the boundary on the bottom left corner.
To get the side borders to go on the outside, i.e.:
++++******************
++++******************
++++******************
++++******************
++++
++++
++++
++++
you would use one element inside another, and set the vertical borders on the outer element and the horizontal borders on the inner element.
Example (with exaggerated border widths just to show the effect):
.outer { border: 10px #0c0; border-style: none solid; }
.inner { border: 10px #ccc; border-style: solid none; }
<div class="outer"><div class="inner">Demo</div></div>
In the example bellow:
http://jsfiddle.net/Du8f6/3/
Im setting inner shadow to the container and 10px border with border-radius set to 50%.
And the result is weired thin white border outside the container border.
The thin white border is visible in:
mozilla firefox
ie 11
and its not visible in:
opera
safari
chrome
any suggestions for fixing this are welcome.
It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.
Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:
In your html:
<div class="fakeborder"><div class="sub">Hm</div></div>
and in your css:
.sub {
...
border: 0px solid black;
...
}
.fakeborder{
margin:0;
padding:10px; /*The fake border width*/
background:black; /*The fake border color*/
}
I had a similar issue.
Even if I set
box-shadow:0 0 0 rgba(0,0,0,0);
to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.
That was working in webkit browsers, but FF was still rendering a thin shadow.
A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)
box-shadow: none
Fiddle: http://jsfiddle.net/e8GR6/11/ (updated)
I have rounded the corners of a relatively positioned outer div (which must remain realtively positioned - that is important). I have hidden the overflow of that div, so that the image and inner div contained within have their corners rounded as well.
Works great EXCEPT in Safari. View the above fiddle in anything but Safari and it looks great, view it in Safari and the inner div doesn't have rounded corners. I have fixed the image to have rounded corners by specifically rounding it's corners. However the inner div will animate in the final site, so I can't just cut it's corners too. As far as I can tell, I need the overflow-hidden to work in Safari like it does in the other browsers, or I need an efficient work-around. Any ideas? jQuery is an option, but I prefer a non-javascript solution.
Solution: Looks like it is a bug in webkit. My solution will be to just fade the div out before it becomes noticeable, but for posterity: webkit.org/blog/181/css-masks. a webkit css mask would be able to knockout those pesky corners for me if fading wasn't a viable option.
Change the thumb_overlay width to 153px, and add webkit definitions for border-bottom-left-radius and border-bottom-right-radius.
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
Fiddle.
Apply a border radius to the left and right bottom of the div that pops up. and shorten the width to match its container. You will get a rounded corner you are looking for. I updated your fiddle:
http://jsfiddle.net/e8GR6/10/
a couple things were hurting you. Your width was bigger then the container so you wouldnt see the end of the child div since overflow is hidden. I would use box-sizing: border-box; and set your width: 100%;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
will address address the top portion not being clipped.
I'm trying to create arrows using borders but FF10 on win7 doesn't want to play ball.
It adds a 1px border around my border.
Here is a JSFiddle with a minimal example:
http://jsfiddle.net/5jjVb/1/
It doesn't matter what color the border I set has, the extra border is always the same color.
For those of you not on FF or on window 7 here is a screenshot:
And here is the same arrow in FF on OS X:
I could always change the color of the arrow to the same color as the extra border but that doesn't feel right.
It's a bug. https://bugzilla.mozilla.org/show_bug.cgi?id=646053
And here is workout to tackle this issue. http://jsfiddle.net/5jjVb/3/
Try this:
div {
border: 30px solid transparent;
border-left-color: #EEE;
-moz-border-left-colors: none;
}
Give rgba() instead of transparent for transparency.For more check my this answer
CSS Transparent Border Problem In Firefox 4?
I got another tricky CSS3 situation that I'm breaking my head on. I'm styleing a form with CSS to have a 10px border on the sides and a 12px border on the bottom, in combination with a 15px border radius.
Unfortunately, the point where the 12px and the 10px borders meet the transition is not gradual but there's a 2px chunk sticking out of the inside of the border. Example (sizes magnified for clarity):
http://jsfiddle.net/LnKND/1/
Any idea how to fix this using only css and no extra elements? Or is this just the way it's rendered currently and should I find another solution?
Add
border-bottom-left-radius:10px 20px;
border-bottom-right-radius:10px 20px;
reference : http://www.w3.org/TR/css3-background/#the-border-radius
for mozilla use
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
if you want, although it handles the issue automatically (if you fix the typo p to px in the example).
reference: https://developer.mozilla.org/en/CSS/border-bottom-right-radius