Como fazer uma borda estilizada conforme imagem abaixo? A grande dúvida é que no lado esquerdo tem dois estilos de borda.
3 Respostas
Se a única borda estilizada assim for a esquerda, você pode trabalhar com os pseudo-elementos :before
e :after
, estilizando tanto suas bordas quanto seu corpo. Veja um exemplo onde criei a borda mais fina com o elemento before
e o pequeno segmento cinza com o elemento after
:
.border {
width: 300px;
border-top: 3px solid #1E90FF;
border-left: 3px solid #1E90FF;
position: relative;
background: white;
padding: 20px;
font-family: monospace
}
.border:before {
content: " ";
position: absolute;
width: 2px;
height: calc(100% - 80px);
left: -3px;
bottom: 0;
border-left: 1px solid #CCCCCC;
background: white;
}
.border:after {
content: " ";
position: absolute;
width: 2px;
height: 30px;
left: -2px;
top: 100px;
background: #CCCCCC;
}
<div class="border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare, mi posuere suscipit malesuada, est ante tempor augue, quis porttitor lectus mauris ac diam. Morbi sed tortor justo. Etiam maximus orci magna, quis tristique dolor tempor id.
</div>
-
Bacana essa solução, mei custosa em termos de código, mas bacana e se for aplicada em vários elementos, deve ser mais leve que a imagem...– MagicHatCommented 30/06/2017 às 18:05
-
@MagicHat e utilizando o
calc
do CSS 3 é possível fazer bem dinâmico e responsivo. Com a imagem não lembro se é possível sem distorcê-la. Você sabe dizer?– WossCommented 30/06/2017 às 18:09 -
ói, inda num testei, mas creio que se colocar os valores em porcentagem, "acho" que vai...[– MagicHatCommented 30/06/2017 às 18:12
Utilize o atributo border-image.
<p id="borderimg">Utilize o atributo <strong>border-image</strong></p>
<style>
#borderimg
{ width:300px;
border: 30px solid transparent;
padding: 20px;
border-image: url("https://i.sstatic.net/vnBXc.jpg") 27;
}
</style>
Verifique a compatibilidade entre os navegadores.
Você pode fazer algo como o exemplo abaixo:
.border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-left {
border-left: 1px solid black;
position: relative;
height: 50px;
}
.half-a-border-on-left:after {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left:-1px;
top: -10px;
}
.half-a-border-on-left:before {
padding:0;
margin:0;
content: "";
width: 1px;
height: 50%;
background-color:blue;
position: absolute;
left: -1px;
bottom: -5px;
}
<div class="half-a-border-on-left border-on-top">Hello world!</div>
https://stackoverflow.com/questions/8804417/css-border-where-only-half-of-a-border-is-visible