html - Using a CSS border-radius much larger than an elements dimensions -

is there issue using border-radius larger element's dimensions?

for example, if wanted make class .circle so:

.circle {     -webkit-border-radius: 1000px;     -moz-border-radius: 1000px;     border-radius: 1000px; } 

so can apply class element make circle, so:

<img width="80" height="80" alt="my gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc"> 

i know haven't run issues far, setting myself more issues down road?

there no issue here @ all. you're free apply class wherever you'd like, no issues really. elements smaller (height or width less than) 2000px become circles, elements larger (height or width more than) 2000px not become circles, rather stay original shapes have largely rounded corners.

this brought in w3 here:

"if horizontal radius larger half width of box, reduced value. if vertical radius larger half height of box, reduced value. (there 4 horizontal , 4 vertical radii.) easy algorithm, because looks @ each radius independently of others, disallows possibly useful borders combine large , small radii , may turn quarter circles quarter ellipses." - the documentation of border-radius property

i should mention can use percents value, 50% being max create circle given element square originally. if element not square create ellipse.

also note values above 50% equivalent 50% when applied corners (like shorthand border-radius:50% applies each corner). jbutler483 pointed out in comments, if applied individual corners, 50% not same 100% because of how combine each other. instead values above 100% equivalent 100%.

it's important note border:50% , border:really-high-pixel-value can have different effects if element not square.