Introdução border style

Boas noites,estou trazendo tutorial para iniciantes,sempre tem gente a aderir blogs.
É algo simples mas que para alguns ajuda com certeza.
Como está imagem acima os vários estilos de border-style.
Agora abaixo vamos usar algumas combinações´´

<style>
.mcaixax1bt {
  margin: 40px auto;
  background: #fff;
  font-family:verdana ;
  color:#000;
  width: 360px ;
  height:20px;
  border-top:5px solid #000;
  border-bottom:5px dashed #000;
 }
</style>
<div class="mcaixax1bt">
border: top border:bottom
</div>

Vamos ao próximo exemplo abaixo´´

<style>
.mcaixax1bt {
  margin: 40px auto;
  background: #fff;
  font-family:verdana ;
  color:#000;
  width: 360px ;
  height:20px;
  border-left:2px dotted #000;
  border-right:10px double #000;
 }
</style>
<div class="mcaixax1bt">
border: left border:right
</div>

Vamos ao próximo exemplo abaixo´´

<style>
.mcaixax1bt {
  margin: 40px auto;
  background: #fff;
  font-family:verdana ;
  color:#000;
  width: 360px ;
  height:40px;
  border-left:2px dotted #000;
  border-right:10px double #000;
  border-top:4px outset #000;
  border-bottom:6px ridge #f0f0f0;
 }
</style>
<div class="mcaixax1bt">
border-bottom border-top border-right border-left
</div>

Vamos usar border radius exemplo abaixo´´

<style>
.mcaixax1bt {
  margin: 40px auto;
  background: #fff;
  font-family:verdana ;
  color:#000;
  width: 360px ;
  height:40px;
  border-left:3px solid #000;
  border-right:3px solid #000;
  border-top:3px solid #000;
  border-bottom:3px solid #fa4b2a;
  border-top-left-radius:5px;
  border-top-right-radius:10px;
  border-bottom-right-radius:15px;
  border-bottom-left-radius:none;
 }
</style>
<div class="mcaixax1bt">
border radius
</div>

Foi isto trouxe desta vez,mas têm muitas possibilidades usar border...
Até outra partilha , alguma coisa deixe recado.

Introdução border style

► 0

► box dicas vários

► Cartita