Cantos arredondados:
Usada com a propriedade CSS border radius. Podemos definir cantos de quatro formas. Então vamos definir sequencialmente com diferentes backgrounds:
A propriedade border-radius pode ser distribuída em um a quatro valores.
Exemplo 1: border-radius: 10px 40px 80px 120px;
Exemplo 2: border-radius: 10px 40px 80px;
Exemplo 1: border-radius: 10px 40px;
Exemplo 1: border-radius: 10px;
O primeiro exemplo afetará os quatro cantos com valores individuais
Os demais subsequentemente afetará três, dois quatro.
Veja abaixo:
Podemos aplicar uma propriedade especificando a borda.
| border-radius: | Uma propriedade abreviada para definir todas as quatro propriedades border - * - * - radius. |
| border-top-left-radius: | Define a forma da borda do canto superior esquerdo. |
| border-top-right-radius: | Define a forma da borda do canto superior direito. |
| border-bottom-right-radius: | Define a forma da borda do canto inferior direito. |
| border-bottom-left-radius: | Define a forma da borda do canto inferior esquerdo. |
Também podemos usar imagens como borda:
Também podemos usar imagens como borda:
| border-image: | Uma propriedade abreviada para definir todas as propriedades border-image- * |
| border-image-source: | Especifica o caminho para a imagem a ser usada como borda |
| border-image-slice: | Especifica como cortar a imagem da borda |
| border-image-width: | Especifica as larguras da imagem da borda |
| border-image-outset: | Especifica a quantidade em que a área da imagem da borda se estende além da caixa da borda |
| border-image-repeat: | Especifica se a imagem da borda deve ser repetida, arredondada ou esticada |