Skip to main content
2 de 5
inclui novas informações
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Como fazer um Border-Radius Invertido com CSS

Estava testando o border-radius e me surgiu uma dívida... Existe alguma forma de com CSS inverter o raio de curvatura do border-radius?

Esse é o formato do shape que eu gostaria de obter

inserir a descrição da imagem aqui

Mas pela documentação parece que o border-radius não aceita valores negativos

.container {
    width: 400px;
    height: 200px;
    background-color: red;
    border-radius: -20px; /* não aceita valor negativo */
}
html {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, green, blue);
    background-repeat: no-repeat;
}
<div class="container"></div>

Então ficou a dúvida, como conseguir essa forma só com CSS e continuar visualizando a imagem de fundo no background??

OBS: Não posso usar SVG ou Clip-Path

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166