CSS inset border radius with solid border

Question

I know that I could create inset/inverted borders playing with radial-gradient, like here: Inset border-radius with CSS3, but what I want to know is if I can draw a solid border of 1px around the resulting shape, like in this image:
enter image description here

I don't only want the bottom-left radius inverted by also a border, and the background color inside the remaining space must be transparent. Is it possible with CSS3 and HTML (I am not interested in canvas or SVG for now)?

score 7 · Accepted Answer · edited Aug 25 '20 at 12:31

7

the demo: Jsfiddle here

Code

figure {
  position: relative;
  width: 200px;
  height: 120px;
  margin: 100px auto;
  overflow: hidden;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

figure:before,
figure:after {
  content: '';
  position: absolute;
}

figure:before {
  right: -50%;
  top: 0;
  background: transparent;
  width: 172px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100%;
  box-shadow: 0 0 0 100em red;
}

figure:after {
  left: -1px;
  bottom: 0px;
  height: 16px;
  width: 128px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 5px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

<figure></figure>

edited Aug 25 '20 at 12:31

Umutambyi Gad

4,082
3
18
39

answered Sep 03 '13 at 16:21

Gildas.Tambo

22,173
7
50
78

Thanks a lot. Now, I don't know if the background-color could be changed to an image, or its opacity, at least – ali Sep 05 '13 at 18:18
you can user rgba to change the color of the figure and then use you background-image as normal on the body part – Gildas.Tambo Sep 05 '13 at 20:33
Oh man, no idea why this answer gets so few votes. Brilliant idea with the box-shadow! – spliter Nov 21 '18 at 22:45

score 0 · Answer 2 · answered Sep 03 '13 at 15:33

In my experience, while it's very feasible and worthwhile to use CSS to create some complex shapes (http://css-tricks.com/examples/ShapesOfCSS/), once you require a border, it's time to give up this method and use images. You can certainly use a clone of the shape z-indexed below it, two pixels wider, two pixels taller, one pixel above it, one pixel to the left, and in the desired border color. Unfortunately, there will always be minor cross browser issues, especially with rounding. It will never really look quite right.

CSS inset border radius with solid border

2 Answers2