Menu
I am hoping someone can help me with a css problem...
I am using a listview to display some results, there is required to be a concept of grouping, to achieve this i am using 2 background colors alternating between groups. I am trying to add a border to these elements, but as the border-top and the border-left may be different colors, is there any way of removing the triangle where they meet?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-top:10px solid red;
border-left:10px solid white;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
729
Here's a solution compatible with IE8+ using :before pseudo:
Fiddle http://jsfiddle.net/PhilippeVay/hXrW5/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
position: relative;
border-top:10px solid red;
border-bottom-style:dotted;
border-left-style:none;
}
p:before {
content: '';
display: block;
width: 10px;
position: absolute;
top: -10px; /* top: 0; if you want red over blue (top over left) */
bottom: 0;
background: blue;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
