Технология CSS3 позволяет легко и просто создавать закругленные углы у блоков. Это делается с помощью свойства border-radius. Таким образом, закругленные углы можно делать для любых блочных элементов на веб-странице. Итак, давайте рассмотрим примеры.

Пример 1:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px;
}

Пример 2:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px 20px 30px 40px;
}

Пример 3:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 50%;
}

Результаты представлены на рисунке:

Таким образом, в первом примере мы закруглили углы блока на 10px. На втором примере мы задали разные значения border-radius для каждого из углов блока. И в третьем примере мы сделали круг, задав всем углам блока радиус скругления 50%. Вот по такому принципу и делаются закругленные углы у блоков в CSS3.