Bordas (border-radius) no CSS3. Aula 48 HTML5 CSS3

Nesse vídeo vemos como configurar bordas no HTML utilizando CSS3.
Sendo utilizado quatro formas de configurar o valor das bordas.

Código fonte HTML:

      <section class="paragrafos bordas">
            <h1>Bordas no CSS3</h1>
            <p>...{    border-radius: Um valor igual a todas bordas. Dois valores, o primeiro vale para a superior direita e inferior esquerda e o segundo superior esquerda e inferior direita. Três valores, Primeiro vale para superior esquerda, segundo vale para superior direita e inferior equerda e a terceira vale para inferior direita. E quatro valores, superior esquerda, superior direita, inferior direita e inferior esquerda.</p>
            <ul class="todositens">
                  <li class="bordasa">A</li>
                  <li class="bordasb">B</li>
                  <li class="bordasc">C</li>
                  <li class="bordasd">D</li>
            </ul>
      </section>

Código fonte CSS:

.bordasa {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    background-color: red;
}
.bordasb {
    border-radius: 5px 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.bordasc {
    border-radius: 5px 10px 20px;
    width: 100px;
    height: 100px;
    background-color: green;
}
.bordasd {
    border-radius: 5px 10px 20px 30px;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.bordas li {
    display: inline-block;
}
.todositens {
    text-align: center;
}

Assista ao vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.