I'm trying to create a "tag"-like element where the radii of the borders are different on the left side.
border-radius: 50px; /* for a completely rounded right side */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
Here's a very brief example:
.tag {
border-radius: 50px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background-color: red;
color: white;
font-family: Helvetica, sans-serif;
}
<span class="tag">Jeanne Oliver</span>
View on JSFiddle
The problem: the two corners on the left, where I should have 3px rounded corners, don't seem to have any rounding at all (see it in the fiddle)
Possible starting point
I've noticed that if I reduce the larger radius to something like 10-12px the issue stops manifesting.
However I don't understand WHY this is happening, and also I need the larger number because the code needs to be used on a variety of tag sizes and don't want to rewrite the border-radius for each size.
This happens when 2 adjacent corners exceed the size of the border box (in your case it's 50px top-right and 50px bottom-right, which exceeds the element's dimenions) and the browser has to scale down all border radius until they won't intersect.
More details on www.w3.org - corner-overlap and a better exemplification here (Lea Verou, "The Humble Border-Radius")
left radius is applied, nothing is going wrong - you can check it by setting display: inline-block; height: 200px; to span. 3px is very small radius to make visible effect on your original span size.
Related
I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.
[Picture taken in Firefox 4]
Maybe someone could explain to me why this is happening and how to solve it?
This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.
More information can be found in this blog post by #gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)
An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).
then:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.
var prcnt = (YOURPERCENTAGE/100)* 366;
I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.
I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).
Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?
You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front
I wanted to create a simple loading animation with CSS, so I needed a border which was only visible 1/4 around the element. The element also needed to be round. I stumbled upon border-top and created the following CSS, which is applied to the "loading element":
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red
}
<div class="loading"></div>
However, now I've gotten a problem, the border created with border-top surrounds approximately 1/2 of the element and has gotten a weirdly shape.
I've, searched for a solution and found out, that I also need to add a border around the complete element, to make it look, like I want it to look. So, I've added the following CSS: border: 5px solid transparent and achieved the result I wanted. The border takes up 1/4 of the element and has gotten linear ends:
Why does my solution work, why does my first attempt surround the element by a half and why is my first attempt so oddly shaped?
CSS borders meet at an angle, so the shape of their ends is determined by the width of each border. This is how borders are used to create CSS triangles. This article has a good overview of how it works, with a nice visual example near the start: The secret of CSS triangles
Of course, it's easier to see what's going on when the borders are all the same width, and there is no border radius to complicate things. But when you just have a single border with width, and border radius, then you've seen how that affects the meeting point.
I recommend you try creating a square div with 4 different coloured borders, and then experiment with each of their widths, and with border radius, using your browser's developer tools so you can see how the meeting points change.
This is because the border width transitions to what it is on the adjacent sides (zero). Here I demonstrate with a wider border on the side.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red;
border-right: 25px solid;
}
<div class="loading"></div>
You'd normally create this sort of effect using pseudo-elements or canvas.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 5px solid;
border-color: #ef7d00 #d8d9d9 #d8d9d9 #d8d9d9;
}
<div class="loading"></div>
I just found that border-radius: 50% and border-radius: 100% look the same.
Does anyone have an explanation on that?
You’ll notice a difference if you round each corner individually. 100% rounds 100% of each edge, 50% only 50% of each edge. If the corner is to be rounded by a radius that is too large for any given edge, then the effective radius will be smaller.
Consider this example:
div{
display: inline-block;
vertical-align: middle;
background: rebeccapurple;
border: 1px solid black;
width: 100px;
height: 100px;
margin-bottom: 10px;
}
code{
display: inline-block;
vertical-align: middle;
margin-left: 20px;
padding: 3px;
background: #eee;
}
.half{
border-top-right-radius: 50%;
}
.full{
border-top-right-radius: 100%;
}
.weird{
border-top-left-radius: 50%;
border-top-right-radius: 100%;
}
<div class="half"></div><code>border-top-right-radius: 50%;</code><br/>
<div class="full"></div><code>border-top-right-radius: 100%;</code><br/>
<div class="weird"></div><code>border-top-left-radius: 50%;<br/>border-top-right-radius: 100%;</code>
Anything more than the radius defaults to the actual radius. By definition a radius is the same in all directions, defining a circle. In other words, half of the diameter. 50%.
That means that anything above the radius (a radius is half, so 50%) defaults to the radius. So the browser thinks of anything above 50% as simply 50%, and will have the same effect.
I found this here.
The actual radius will always be used if the radius is exceeded. By definition, a radius defines a circle by being the same in all directions. Alternatively said, the diameter's half. 50%. This is recognised by the browser.
Some authors decide to write exclusively, although I'm not sure why they do it. The browser just appears to have to work harder to determine what the actual radius is (in order to prevent curves from overlapping). The browser will only calculate the circle's diameter to be half that even if we use px units. Choose 50% if that seems the most logical option for your own sanity.
I'm trying to create an expandable background image for some text. The border-image property gives me almost exactly what I want. The problem is I don't really want a border, more that the border becomes the background for the content (specifically I like the fixed resolution edges and stretching centre). Setting height to zero gives the exact background I want, unfortunately the text is dropped below the centre:
height: 0px;
display: inline-block;
font-size: 100pt;
border: 149px;
border-image: url('img.png') 149 149 stretch;
EDIT: for firefox border: solid 149px;
http://jsfiddle.net/RL798/
What's the simplest way to shift the text back up?
Is there a simple way to add a negative offset to the width to bring the border sides in?
This is a great example where I believe negative padding would provide a perfect solution.
I'm aware there's many other ways to achieve the same result (eg a standard background image and two elements either side), but I'm after something small and simple.
You could use line-height:
http://jsfiddle.net/jonigiuro/RL798/4/
div {
height: 0px;
display: inline-block;
font-size: 100pt;
border: 149px;
border-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Button_Icon_GreenBlue.svg/300px-Button_Icon_GreenBlue.svg.png') 149 149 stretch;
line-height: 20px;
}
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}