What is causing this oblique border issue? - html

Question

I am trying to remove oblique border issue, best to show it in a picture:
Here is the css applied to the div:
.blog_post {background: #fff}
.blog_post .post {
border-right-color: #F1F1F1;
border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-width: 10px;
}
.blog_post .post {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #9A9570;
border-color: #8F8960 #8F8960 -moz-use-text-color;
border-image: none;
border-style: solid;
border-width: 10px;
float: left;
margin: -560px 0 0 -12px;
padding: 28px 30px;
position: relative;
width: 528px;
z-index: 9;
}
Any help would be greatly appreciated.

Answer 1

Easy way: Another container
You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.
Demo
HTML
<div class="container">
<div class="inner-container">
...
</div>
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
}
.inner-container {
border-left:10px solid blue;
border-right:10px solid blue;
}
Hard way: :before and :after
This method is a little more tricky but you can manage to pull it off with only one wrapping element.
Demo
HTML
<div class="container">
...
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
position:relative;
/* pad out the left and right to allow room for the border */
padding:0 10px;
}
.container:before,
.container:after {
position:absolute;
top:0;
bottom:0;
width:10px;
background-color:blue;
display:block;
content:"";
}
.container:before {
left:0;
}
.container:after {
right:0;
}

Answer 2

You can always use inset box shadows. They are pretty easy to use, and they don't require much CSS, nor do you have to change the HTML.
Check it out. jsFiddle here
div {
box-shadow: inset 0px 10px 0px red;
border: 10px solid blue;
border-top: 0px;
}

Answer 3

Using pseudo-classes :before and :after
.border-fixed {
width: 300px;
height: 300px;
background: #EEE;
margin: 60px auto 0;
border: solid 10px #DDD;
border-top-color: #BBB;
position: relative;
}
.border-fixed:before,
.border-fixed:after {
content: "";
top: -10px;
left: -10px;
position: absolute;
width: 10px;
height: 10px;
background: #BBB;
}
.border-fixed:before {
right: -10px;
left: auto;
}