Quero saber como manipulo a borda de uma div.A ideia é que tenha uma borda bem expeça no canto superior direito desse elemento.Ou seja, se a div tiver um formato quadrado de 4 px de cada lado.Quero que no lado direito superior tenha uma borda de 2px de tamanho e bem expeça.
1 Resposta
Você pode utilizar:
border-width: 2px 10px 4px 20px;
border-style: solid;
legenda:
border-width: (top border) (right border) (bottom border) (left border)
Exemplo:
<div style="height: 100px; width: 100px; background: red; border-width: 2px 10px 4px 20px; border-style: solid;">
texto
</div>
Fonte: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width
Edit
Borda apenas na right e top da div com 20px de altura e largura
.div {
position:relative;
width:150px;
height:200px;
background: lightgray;
}
.div:before,
.div:after,
.div>:first-child:before,
.div>:first-child:after {
position:absolute;
width:20px; height:20px;
border-color:blue;
border-style:solid;
content: ' ';
}
.div:before {top:0;left:0;border-width: 0px 0 0 0px}
.div:after {top:0;right:0;border-width: 4px 4px 0 0}
.div>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.div>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
<div class="div">
</div>
-
Nao é bem isso que estou em mente.Olha esse link ! tem uma imagem que da pra eu mostrar como exemplo.Quero que apenas tenha borda na area circulada de vermelho.google.com.br/…:– thiago6/11/2017 às 2:35
-
-
-
-