How to make inverted corners?

Question

I am looking to make a corner like this. I have searched but only found very complicated (to me) and long codes.

I stubled over this:

background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);

I want the rounded corners, but to also have a border at 2px, help anyone?

score 1 · Answer 1 · answered Nov 06 '21 at 18:49

You can have just one element which has a background made out of linear and radial gradients.

This snippet puts pseudo elements on the main element. One uses the radial gradient given in the question to create the circles at the 4 corners, the other pseudo element just has the pale blue background to make sure that we don't stumble into the extra thin white lines which can appear between elements on zooming.

The main element completes the picture with a border in the lightblue.

* {
  padding: 0;
  margin: 0;
}

.circles {
  display: flex;
  width: 200px;
  height: 100px;
  rbackground-color: lightblue;
  border-style: solid;
  border-color: lightblue;
  border-width: 10px;
  position: relative;
  justify-content: center;
  align-items: center;
  color: white;
}

.circles::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at top left, lightblue 0 10%, transparent 10% 100%), radial-gradient(circle at top right, lightblue 0 10%, transparent 10% 100%), radial-gradient(circle at bottom left, lightblue 0 10%, transparent 10% 100%), radial-gradient(circle at bottom right, lightblue 0 10%, transparent 10% 100%), linear-gradient(gray, gray);
  z-index: -1;
}

.circles::before {
  ;
  background-color: lightblue;
  content: '';
  width: 102%;
  height: 102%;
  z-index: -2;
  position: absolute;
  left: -1%;
  top: -1%;
}

<div class="circles">text here</div>

score 0 · Answer 2 · answered Nov 06 '21 at 18:25

Well, I just did some elementary things by adding two divs 1 for the background color and another for the text. Centered them. Then, made 4 other elements to position them absolutely in relation to the container div. Then just adjusted the padding and corner sizes.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 50%;
    margin: 0 auto;
    margin-top: 100px;
}

.container {
    display: flex;
    background-color: rgb(74, 195, 195);
    width: 500px;
    height: 200px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.inner {
    background-color: rgb(65, 58, 58);
    color: #fff;
    width: 450px;
    height: 150px;
    padding: 35px 30px;
}

.corner {
    background-color: rgb(74, 195, 195);
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.left-top {
    position: absolute;
    top: 0;
    left: 0;
}

.left-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

.right-top {
    position: absolute;
    right: 0;
    top: 0;
}

.right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
}

<body>
<div class="container">
    <div class="inner">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae praesentium laborum tempore repellat expedita eum dolorem. Maxime facilis, distinctio quibusdam mollitia consectetur veritatis sint.
    </div>
    <div class="corner left-top">&nbsp;</div>
<div class="corner right-top">&nbsp;</div>
<div class="corner left-bottom">&nbsp;</div>
<div class="corner right-bottom">&nbsp;</div>
</div>

    



</body>

Does it have to be one class per corner, it is not possible to do all the corners at once? — confusedstudent, Nov 06 '21 at 18:30
In my example yes. They are 4 different objects in 4 different places. In other words you cannot position 1 object in 4 places at once. — Brent, Nov 06 '21 at 18:42

How to make inverted corners?

2 Answers2