Transparent border radius outside
سؤال
I need some help, I have a div with border-radius and I need it to be transparent outside the circle div. I tried with :after and outline. With ":after" the border stayed within the div and with outline I couldn't get it rounded.
Does anyone know the answer ?
CSS :
div.circle {
background: black;
width: 5em;
height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
div.circle p {
padding: 2em 2em 0 2em;
color: white;
}
div.circle:after {
content:'';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 2.5em;
border: 4px solid rgba(255, 255, 255, 0.51);
}
CSS with outline property:
div.circle {
outline: 4px solid rgba(255,255,255,0.3);
background: black;
width: 5em; height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
What I want: http://giovannigras.be/home/img.png
المحلول
Use box-shadow instead of border:
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.51);
Cause a transparent border will transpare the background beneath,
while if you use the spread
value in the box-shadow property you're good to go:
Also as suggested by @vals you can go with background-clip
to retain the background size into the content-box
size model cause otherwise goes into the default border-box.
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
نصائح أخرى
If you want your border to be transparent (or semitransparent), and you are setting a black background, you need to set the background limited to the inner part, so that the border can be seen.
The property for this is background-clip: content-box;
CSS
div.circle {
background: black;
background-clip: content-box;
width: 5em;
height: 5em;
border-radius: 50%;
border: solid 5px rgba(0,0,0,0.3);
}
You can use a container to provide a border offset if you need it.
DEMO
HTML
<div class="border">
<div class="inner"></div>
</div>
CSS
.border {
width: 80px; height: 80px;
border-radius: 50%;
background: transparent;
border: 10px solid rgba(255,255,255,.4);
}
.inner {
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background: rgba(255,255,255,.6);
border: 10px solid transparent;
margin: 10px;
}