É bem simples criar uma caixa com os cantos arredondados, basta utilizar a propriedade border-radius.
Para cantos suavemente arredondado use por volta de 5px de border-radius. Para cantos totalmente arredondados, como os da imagem, basta utilizar um border radius maior ou igual à altura da caixa.
Exemplo: Se a caixa possui um height: 40px; o border-radius deve ser de 20px ou mais para manter os cantos totalmente arredondados.
Círculos em CSS também são feitos com border-radius, basta você ter um box com height e width iguais e um border-radius: 50%;