0

Como fazer uma borda estilizada conforme imagem abaixo? A grande dúvida é que no lado esquerdo tem dois estilos de borda.

inserir a descrição da imagem aqui

3
  • A borda right e bottom é transparente?
    – MagicHat
    30/06/2017 às 16:59
  • Fiquei sem entender a sua pergunta, mas dá uma olhada aqui
    – Marconi
    30/06/2017 às 17:00
  • @MagicHat É sim.
    – Gladison
    30/06/2017 às 17:00

3 Respostas 3

5

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>

3
  • 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...
    – MagicHat
    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?
    – Woss
    30/06/2017 às 18:09
  • ói, inda num testei, mas creio que se colocar os valores em porcentagem, "acho" que vai...[
    – MagicHat
    30/06/2017 às 18:12
1

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.stack.imgur.com/vnBXc.jpg") 27;
}
</style>

Verifique a compatibilidade entre os navegadores.

-1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .