Propriedade border-radius no CSS3. HTML5 CSS3, Aula 48

Propriedade border-radius no CSS3. HTML5 CSS3, Aula 48

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

Facebook: http://migre.me/oTHD8
Qualquer dúvida é só comentar.

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;
}

Vídeo: