linear-gradient with a border-radius at certain percentages

Question

body {
  background-image: linear-gradient(
      0deg,
      var(blue) 70%,
      var(red) 30%
    )
    no-repeat;
  height: 100vh;
}

1) How to add a border-radius at the exact bottom left and right corners of the red background-color?

As i require the border-radius in the red color which is part of the linear-gradient, i don't know how.

Its just on the body element.

How can you acheive what i need with before/after psuedo elements? — mockingbird, Aug 23 '22 at 09:07

score 1 · Accepted Answer · answered Aug 23 '22 at 11:03

This snippet puts the red background onto the after pseudo element which is given 30% of the overall height of the body and has the two bottom corners rounded.

The before pseudo element is given the blue background.

body {
  --blue: blue;
  --red: red;
  height: 100vh;
  width: 100vw;
}

body::before,
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

body::before {
  background-color: blue;
  height: 100%;
}

body::after {
  height: 30%;
  background-color: var(--red);
  border-radius: 0 0 20px 20px;
}

<body></body>

It is possible to combine linear and radial gradients to get a rounded effect, but I find the result isn't always as crisp as using border rounding.

Simple and working answer. – mockingbird Aug 24 '22 at 12:11 — mockingbird, Aug 24 '22 at 12:11

linear-gradient with a border-radius at certain percentages

1 Answers1