Border top and bottom without triangle cut

raoen Published at Dev

raoen

I need to create two Horizontal line and between them there is a centered word. I create this code:

html:

<div class="myRow">preference</div>

css:

.myRow
 {color:red;
  text-align:center;
  border-style:solid;
  border-width:medium;
  border-color:#b2b2ac white #b2b2ac white;}

Unfortunately, the top border and bottom border are not straight at the ends.

How can I get the perfect rectangle border on the top and bottom of the box?

Paulie_D

Borders meet at angles. The angle at which they meet is determined by the relative sizes of each border. If they are equal width, the angle is 45 degrees...if the aren't the same the angle is different.

Example:

.box {
  width: 50px;
  height: 50px;
  margin: 10px 25px;
  background: lightblue;
  display: inline-block;
}
.large {
  border-top: 50px solid red;
  border-left: 50px solid green;
}
.medium {
  border-top: 50px solid red;
  border-left: 10px solid green;
}

<div class="box large"></div>

<div class="box medium"></div>

So, to have a square end, one of the widths needs to zero. In your case as this is needed at both ends, change the side border widths to 0.

.myRow {
  color: red;
  text-align: center;
  border-style: solid;
  border-width: medium 0;
  border-color: #b2b2ac white;
  width: 80%;
  margin: 1em auto;
}