Uso de bordas arredondadas em negativo para o conteúdo

Formalizando aqui em issue o que foi comentado nas discussões desde o dia 13/7... O layout abaixo (esquerda) é muito mais adequado

do que o proposto para as boxes de tópicos, ilustrado à direita. A rigor o proposto ainda está com bug, por não aderir à solicitação inicial de dar maior unidade visual ao bloco.

A falha fica perceptível quando as boxes são sobrepostas uma à outra, por exemplo a box "CRP" sobreposta à "Governo Geo-digital" da ilustração, é difícil perceber onde começa uma e onde termina a outra, e portanto saber se ao clicar "Saiba mais" será relativo ao de cima ou de baixo.

Implementação em HTML+CSS

Aqui o border-radius foi exagerado, reduzir para o tamanho original, eventualmente um ou dois pontos mais para garantir o efeito desejado.

<!DOCTYPE html>
<html>
<head><style>

.blueBox {
  border-radius: 18pt;
  background: #1b439a;
  padding: 20px; 
  width: 200px;
  height: 250px;

  color: #FFF;
  font-size: 20pt;
  text-align: center
}

.innerBox {
    position: relative;
    top:-208px;
    border-radius: 18pt;

    width: 240px;
    height: 120px;

    background: #fff;
    color: #000;
    font-size: 12pt;
}
.innerBox p{  padding: 10pt; }

</style></head>

<body>

<p>Context...</p>
<p class="blueBox">Rounded<br/>corners!

  <div class="innerBox"><p>
  Nostrud laborum nostrud reprehenderit exercitation tempor Lorem pariatur... 
  </p></div>

</p>

<p>... Context...</p>

</body>
</html>

Resultado:

AddressForAll / site-v2

Uso de bordas arredondadas em negativo para o conteúdo #32

Implementação em HTML+CSS