CODEWITHSUNDEEP
htmlcssborder
user1288838
user1288838

Reputation:

CSS eliminate the 45deg cut on the corners of a 'bordered' element

http://jsfiddle.net/2tm8g6zn/

css:

div{

    height: 20px;
    width: 20px;
    float: left;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    border-left-color: transparent;
    border-right-color: transparent;

}


.start {
 border-left-color: black;   
}

.stop {
 border-right-color: black;   
}

html:

<div class='start'></div><div></div><div></div>....etc....<div class='stop'></div>

Given this, it creates a grid of divs that form a long outlined rectangle. However, where the divs meet there is a trianglular notch made by the edges of the border-top and border-bottom respectively. See:

enter image description here

I am curious is there any way using css, or javascript, to get rid of those notches - expanding the border to the edges of the div without that 45deg cut on each corner?

I realize the answer may be 'no'. But if anyone can figure it out, you can!

Thanks, Will

Upvotes: 0

Views: 249

Answers (3)

Jonas Grumann
Jonas Grumann

Reputation: 10786

Just use border-left: 0 and border-right: 0 instead of transparent http://jsfiddle.net/2tm8g6zn/3/

div{

height: 20px;
width: 20px;
float: left;
border-style: solid;
border-color: black;
border-width: 3px;
border-left: 0;
border-right: 0;
}

.start {
border-left: 3px solid black;
}
.stop {
border-right: 3px solid black;
}

.with-box-sizing, .without-box-sizing {
overflow: hidden;
width: auto;
float: none;
border: 0;
height: auto;
margin-bottom: 10px;
}

.with-box-sizing * {
box-sizing: border-box;
}
<div class="without-box-sizing">
<div class='start'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='stop'></div>
</div>


<div class="with-box-sizing">
<div class='start'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='stop'></div>
</div>

Setting border-color: transparent tells the browser, "Yes, I want borders and their color has to be trasparent" so those triangles are created where the horizontal and the vertical borders meet.

Upvotes: 2

Krzysztof Krawiec
Krzysztof Krawiec

Reputation: 127

try to use border-style instead of border-color.

div{
    
    height: 20px;
    width: 20px;
    float: left;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    border-left-style: none;
    border-right-style: none;

}

.start {
 border-left-style: solid;   
}

.stop {
 border-right-style: solid;   
}
<div class='start'></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='stop'></div>

Hope it helps :)

Upvotes: 0

Turnip
Turnip

Reputation: 36662

Change your CSS to something like this: 

div{  
    height: 20px;
    width: 20px;
    float: left;
    border: 3px solid black;
    border-left: none;
    border-right: none;
}

.start {
 border-left: 3px solid black;   
}

.stop {
 border-right: 3px solid black;   
}
<div class='start'></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='stop'></div>

Upvotes: 1

Related Questions