border-radius

Boa tarde, Flávio! Tudo certinho? =)

O primeiro retângulo, com todas as bordas arredondadas, basta você aplicar a propriedade border-radius, assim:

div {
    border-radius: 10px;
}

Como não especificamos quais bordas queremos o arredondamento, teremos o resultado em todas! =)

Na outra opção, com a borda do topo e à esquerda, e a de baixo à direita, basta fazermos o seguinte:

div {
    border-radius: 10px 0;
}

Com isso, o CSS será aplicado aos pares. Na primeira e terceira borda, teremos o arredondamento de 10px. Na segunda e quarta, não... Mas qual é a primeira, segunda,...?

A primeira é aquela que está no canto superior esquerdo, depois disso, basta percorremos as bordas em sentido horário. =)

As outras duas eu não me lembro como faz... Eu vou procurando aqui e, se achar eu lhe informo, ok? =)

Fábio

O de cima e da direita tem que usar :before e :after. Eu manjo pouco, mas é mais menos assim, segue HTML e CSS:

<div id="ret">
</div>

#ret {
  position:relative;
  background-color: black;
  width: 100px;
  height: 70px;
  border: 1px solid #000;
  display: inline-block;
}

#ret:after {
  position:absolute;
  left:-30px; 
  top:-30px;
  content:'';
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

#ret:before {
  position:absolute;
  left: 80px; 
  top: -10px;
  content:'';
  border-right: 70px solid white;
  border-bottom: 70px solid transparent;
}

O de baixo e da direita tem que fazer a borda cobrir metade do retângulo, segue HTML e CSS:

<div id="triangle-bottomleft">
</div>

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 60px solid red;
    border-right: 100px solid transparent;
}

Segue codepen que eu tava brincando: http://codepen.io/anon/pen/MJxLoB