The radius of the inner border does not work

Question

I have a question about the border radius. I mainly use code to create some kind of highlighting tool to find hidden html. Here is the fiddle: http://jsfiddle.net/pwneth/hj57k/1899/

CSS

#tail { border: 1000px solid #fff; position: absolute; float: left; height: 100px; width: 100px; background-color: rgba(0,0,0,.0); z-index: 100; top: 0px; left: 0px; pointer-events:none; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000; } 

I need to somehow set the radius of the border of the figure so that it appears as a circle. However, this is a problem because it only affects the outer border, which is not something that I want to do. Only inside the border.

Answer 1

Here's a simpler option:

Fiddle

Just put the radius of the border in the original element.

 #tail { /* ... */ border-radius:100%; } 

Then just hide everything until the mouse runs out.

 body /* or whatever element you want */ { display:none; } 

Then do the following:

 $(document).bind('mouseenter', function (e) { $('body').show(); }); $('body').bind('mouseleave', function (e) { $(this).hide(); }); 

This way, users will never be able to see hidden content.

Answer 2

These solutions are more general and should be used if the desired shape is rounded by a square or rectangle.

Using the after pseudo-element: http://jsfiddle.net/hj57k/1903/

 #tail { border: 1000px solid #fff; position: absolute; float: left; height: 100px; width: 100px; background-color: rgba(0,0,0,.0); z-index: 100; top: 0px; left: 0px; pointer-events:none; } #tail:after { -webkit-box-shadow: inset 0 0 20px #000000; -moz-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000; border: 10px solid white; border-radius: 20px; content: ''; display: block; height: 100%; left: -10px; position: relative; top: -10px; width: 100%; } 

You need relative positioning to cover the upper left edge, which otherwise would still be visible. Beware of using the box model or browser inconsistencies in the size of the calculations, this works in webkit, perhaps this is not the case for IE.

Answer 3

No major change: jsFiddle

As a result, set border-radius = border-width + radius .

Answer 4

Jakub is close, but it creates a supposed circle.

http://jsfiddle.net/hj57k/1905/

 #tail { border: 1000px solid #fff; position: absolute; float: left; height: 100px; width: 100px; background-color: rgba(0,0,0,.0); z-index: 100; top: 0px; left: 0px; pointer-events:none; } #tail:after { -webkit-box-shadow: inset 0 0 20px #000000; -moz-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000; border: 50px solid white; border-radius: 999px; content: ''; display: block; height: 100%; left: -50px; position: relative; top: -50px; width: 100%; }