4

Preciso fazer um elemento com este tipo de borda. Não achei em lugar nenhum algo que diminuísse o tamanho da borda. Achei e conheço apenas sobre a espessura.

inserir a descrição da imagem aqui

1 Resposta 1

4

Nativamente não tem como mudar o "tamanho" de cada borda, mas você pode simular com pseudoelementos:

div {
  position:relative;
  border-bottom:1px solid #000; /* borda inteira de baixo */
  border-right:1px solid #000;  /* borda inteira da direita */
  display:inline-block;
  padding:10px;
}

div::after,
div::before {
  content:"";
  position:absolute;
  z-index:1;
}

div::after { /* borda parcial da esquerda */
  bottom:0;
  left:0;
  border-left:1px solid #000;
  height:50%;
}

div::before { /* borda parcial da direita */
  top:0;
  right:0;
  border-top:1px solid #000;
  width:40%;
}
<div>sobre</div><br><br><div>a borda incompleta</div>

Se o fundo for sólido, dá pra cobrir as bordas com um retângulo só:

div {
  position:relative;
  display:inline-block;
  padding:10px;
}

div::before,
div::after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  background:#fff;
}

div::after { /* retangulo que esconde um pedaço das bordas */
  width:70%;
  height:50%;
}

div::before {
  width:100%;
  height:100%;
  border:1px solid #000; /* borda inteira */
}
<div>sobre</div><br><br><div>a borda incompleta</div>

2
  • Boa cara! Gratidão, deu certo! não tinha pensado nos pseudoelementos!! Commented 30/11/2016 às 13:43
  • @TcheloCabral dei a idéia básica, mas se ficar alguma dúvida, só comentar aqui.
    – Largato
    Commented 30/11/2016 às 13:46

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 .