Incomplete Edge

Question

Incomplete Edge

Navigation

#1 by (4 votes)

4

I need to make an element with this type of border. I found nowhere to diminish the size of the border. I found and I know only about the thickness.

css3 css-border

asked by anonymous 29.11.2016 / 20:50

1 answer

Divide string into substrings and search for them in another Difficulty in placing non-significant zeros in a converted binary number

score 4 · Accepted Answer

Natively can not change the "size" of each border, but you can simulate with pseudo-elements:

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 borders 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>