I convert a div into a circle and give border and fill that div with color but for Mozilla browser that circle border is not coming perfectly and not give fully sharpness. It looks like div color fades out of the div. Please give the solution.
Please give the full code in a “working page” or a CodePen so we can see what you see.
A “working page” is one that starts with <!doctype html>, contains <head> and <body> sections, and ends with </html>
If you include code in your post, be sure to preceed the block of code with three backticks on a line by themselves and ends with another three backticks on a line by themselves, like this…
```
your code here
```
Alternatively, you can highlight your code and click the </> symbol in the editor’s menu bar.
Have you tested for this problem in any other browsers?
3 Likes
Border-radius can look blurry in some browsers and worse depending on your set up.
You can smooth out the radius with an inner element (if layout allows).
Here’s a little codepen demo showing subtle differences.
4 Likes
Thank you for solution.
Try this:
Without Border:
<div style="width:150px; height:150px; text-align:center;">
<svg width="100%" height="100%" viewBox="0 0 2345 2345">
<circle cx="50%" cy="50%" r="50%" fill="red" />
</svg>
<div style="margin-top:-58%;">
6
</div>
</div>
##Edit:##
Maybe With Border:
<div style="width:150px; height:150px; text-align:center;">
<svg width="100%" height="100%" viewBox="0 0 2345 2345">
<circle cx="50%" cy="50%" r="50%" fill="red"
stroke="#000" stroke-width="11"/>
</svg>
<div style="margin-top:-58%;">
6
</div>
</div>
**Edit again** My latest project requires an image inside an [**animated circle**](http://www.johns-jokes.com/downloads/sp-g/praveen_Kumar_Verma/index-001.php)
1 Like
I thought that svg would be a much better circle than plain CSS but the example with border is not as clean as my example 5 as the svg seems to show flattened top, bottom left and right. I guess it may be a setting somewhere but I am unfamiliar with svg drawing.
The .svg class is not required as the svg circle fits inside the parent div and should display without the flattened top and bottom. Try a background colour on the div to see what is happening. I am currently tediously tapping on a tablet and will try again when I am on the desktop.
Is the animated example any smoother?
I am impressed with SVG because of its simplicity.
It does not quite fit in the div because of the stroke. With 50% radius, the circle its self fits exactly, but stroke is rendered centred on the edge, so escapes outside of the edge by half the stroke width.
This is causing the slight cropping showing as flat sides.
You can see more clearly with a wider stroke (1). A reduced radius fixes it (3). (2) is the original.
3 Likes
The class is needed in my example to set the size of the container (just as you had done with your inline css).
The stroke seems to flatten the circle at top, bottom, left and right which is why I exaggerated the stroke width in the example but have returned it back to normal but the effect is still not correct.
Yes that is the solution I arrived at but its still not right because now you have a circle that is not the correct size as the others.
I’m guessing there is an easy answer to this as you must be able to put borders on elements so that they fit (like box-sizing). One day I’ll have to sit down and look at svg properly but drawing shapes was never on my list of priorities 
1 Like
Many thanks for demo and I will keep in mind the half-a-stroke difference
1 Like
I don’t know if there is a property for stroke position, like in Photoshop where you can have inside, outside or centred. Will look into it.
I changed the demo and removed the viewbox so that there was a 1 to 1 pixel relationship and sized the radius in px so that the border could be added and now it is the exact size.
3 Likes
That appears not to work (4).
1 Like
I had an unsuccessful search for the SVG equivalent to CSS outline
SVG does accept some inline CSS styles and will try when on the desktop.
Yes, a lot of those attributes that are in-line on the svg elements could be replaced by a class and applied via css. I like that because it can make them more dynamic, changing styles based on pseudo classes and suchlike.
Maybe the stroke alignment will work via css?
1 Like
I tried with css, but stroke-alignment still seems to do nothing. 
2 Likes
Hi there peeps,
does this help…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
#svg-holder {
width: 25vw;
height: 25vw;
margin: auto;
}
#svg-holder text {
font-family: verdana;
font-size: 3vw;
font-weight: bold;
}
@media screen and (max-width:30em) {
#svg-holder{
width: 50vw;
height: 50vw;
}
#svg-holder text {
font-size: 6vw;
}
}
</style>
</head>
<body>
<div id="svg-holder">
<svg height="100%" width="100%">
<circle cx="50%" cy="50%" r="49%" stroke="#000" stroke-width="1%" fill="#f00"/>
<text x="39%" y="44%">svg</text>
<text x="34%" y="62%">circle</text>
</svg>
</div>
</body>
</html>coothead
2 Likes
Thanks coothead
I already tried the 1% borders and while that does allow scalability it does not give you the nice 1px borders shown in my last demo unless you happen to scale it to the right point or use fractional percentages which can be awkward as they disappear at small sizes.
However, I guess as the S in svg stands for scalable I should not be surprised that borders scale also. You can’t have your cake and eat it.
2 Likes
I have been searching and it seems that the stroke-alignment property has been added to the SVG spec, but there is no browser support for it yet.
1 Like