Skip to main content
adicionou 78 caracteres ao conteúdo
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Observação: Pra alegria da gurizada: funciona no Internet Explorer 10.

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Observação: Pra alegria da gurizada: funciona no Internet Explorer 10.

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

adicionou 1272 caracteres ao conteúdo
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>