Give a specific width to an edge

Question

Give a specific width to an edge

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I want to make a border with a specific size in a div but I do not get how to do it, because if I put border-top: 1px solid #000; the edge would be covering the whole size of the container and I want to place it in half or to my liking .

<div>

.contenedor{
width:100px;
border-top: 2px solid #000;
}

<div class="contenedor">
<h2> Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem  </h2>
</div>

css3

asked by Victor Escalona 18.06.2018 в 22:58

source

2 answers

1

I would do two divs, one with the maximum width, say, 400px; and a smaller one, for example 200px.

Then the small div you put the property border-top and ready.

answered by 18.06.2018 в 23:12

C # Read name of local or remote Database Inner Join Sql for a query of two tables

score 1 · Accepted Answer

With an "after" element, note that between the first and the second examples, the model box of the div changes (when adding a border to 2, the margins of H1 and P are respected with respect to the DIV), between 3 and On 4 there is a BR to separate. A 3, 4 and 5 transparent border is applied to the DIV.

.contenedor{
  width: 400px;
  position:relative;
  background-color: #eee;
}
.contenedor.bordealamitad::after{
  position:absolute;
  top:-1px;
  left:0;
  width:50%;
  border-top: 2px solid #000;
  content:" ";
}
.masancho {
 width: 600px;
}
.borderesaltado {
border: 1px dashed red;
}
.bordetransparente {
   border: 1px solid transparent;
}

<div class="contenedor bordealamitad">
<h2>1 Lorem ipsum Lorem ipsumLorem ipsumLorem</h2>
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem</p>
</div>
<div class="contenedor bordealamitad masancho borderesaltado">
<h2>2 Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem </h2>
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLoremLorem ipsum Lorem ipsumLorem ipsumLorem</p>
</div>
<div class="contenedor bordealamitad masancho bordetransparente">
<h2>3 Lorem ipsum Lorem ipsumLorem ipsumLorem </h2>
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem</p>
</div>
<br/>
<div class="contenedor bordealamitad bordetransparente">
<h2>4 Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem  </h2>
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLoremLorem ipsum </p>
</div>
<div class="contenedor bordealamitad masancho bordetransparente">
<h2>5 Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem  </h2>
<p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem</p>
</div>