Is it possible to make a text box with negative border Radius?

Question

I would like to do this negative curve using CSS or Jquery, it is possible?

Answer 1

If it is possible to make that effect, you can use shape-outside:circle(); in modern browsers.

Example:

.wrapper {
    width: 25%;
    height: auto;
    float: left;
    margin-right:5rem;
    -webkit-shape-outside:circle();
    shape-outside:circle();
}
.circulo {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: #cff;
}

<div class="wrapper ">
    <div class="circulo"></div>
</div>
<p>As armas e os barões assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda além da Taprobana, Em perigos e guerras esforçados, Mais do que prometia a força humana, E entre gente remota edificaram Novo Reino, que tanto sublimaram;</p>
<p>E também as memórias gloriosas Daqueles Reis, que foram dilatando A Fé, o Império, e as terras viciosas De África e de Ásia andaram devastando; E aqueles, que por obras valerosas Se vão da lei da morte libertando; Cantando espalharei por toda parte, Se a tanto me ajudar o engenho e arte.</p>

Inspired here and here.

A solution with JS/HTML/CSS for older browsers:

jsFiddle: http://jsfiddle.net/h07n28q0/

var circulo = document.querySelector('.circulo');
for (var i = 0; i < 10; i = i + 0.15) {
    var el = document.createElement('div');
    var cos = Math.abs(Math.cos(i) * 100);
    el.style.width = cos + 'px';
    el.style.opacity = i / 10 - 0.15;
    circulo.appendChild(el);
}

var lusiadas = ["As armas e os barões assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda além da Taprobana, Em perigos e guerras esforçados, Mais do que prometia a força humana, E entre gente remota edificaram Novo Reino, que tanto sublimaram. E também as memórias gloriosas Daqueles Reis, que foram dilatando A Fé, o Império, e as terras viciosas De África e de Ásia andaram devastando; E aqueles, que por obras valerosas Se vão da lei da morte libertando; Cantando espalharei por toda parte, Se a tanto me ajudar o engenho e arte.", "Cessem do sábio Grego e do Troiano As navegações grandes que fizeram; Cale-se de Alexandro e de Trajano A fama das vitórias que tiveram; Que eu canto o peito ilustre Lusitano, A quem Neptuno e Marte obedeceram: Cesse tudo o que a Musa antígua canta, Que outro valor mais alto se alevanta.", " E vós, Tágides minhas, pois criado Tendes em mim um novo engenho ardente, Se sempre em verso humilde celebrado Foi de mim vosso rio alegremente, Dai-me agora um som alto e sublimado, Um estilo grandíloquo e corrente, Porque de vossas águas, Febo ordene Que não tenham inveja às de Hipoerene. ", " Dai-me uma fúria grande e sonorosa, E não de agreste avena ou frauta ruda, Mas de tuba canora e belicosa, Que o peito acende e a cor ao gesto muda; Dai-me igual canto aos feitos da famosa Gente vossa, que a Marte tanto ajuda; Que se espalhe e se cante no universo, Se tão sublime preço cabe em verso. ", " E vós, ó bem nascida segurança Da Lusitana antígua liberdade, E não menos certíssima esperança De aumento da pequena Cristandade; Vós, ó novo temor da Maura lança, Maravilha fatal da nossa idade, Dada ao mundo por Deus, que todo o mande, Para do mundo a Deus dar parte grande."];

var el = document.createElement('p');
el.innerHTML = lusiadas.join('<br /><br />');
circulo.appendChild(el);

.circulo div {
    height: 10px;
    border:1px solid red;
    float: left;
    clear: both;
    margin-right: 10px;
}
.circulo{
    width: 400px;
}

<div class="circulo"></div>