Incomplete Edge

Question

I need to make an element with this kind of edge. I did not find anything anywhere that would decrease the size of the border. I found and know just about the thickness.

Answer 1

Natively there is no way to change the "size" of each border, but you can simulate with pseudoelements:

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>

If the background is solid, you can cover the edges with a single rectangle:

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>