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.
1 Resposta
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>
-
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