Geek Answers Handbook

The border

I hope someone can help me with a css problem ...

I use listview to display some results, it is necessary that there is a concept of grouping, for this I use 2 background colors alternating between groups. I am trying to add a border to these elements, but since the borders and upper borders can be of different colors, is there any way to remove 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>
+8
css border
source share
4 answers

You can write like this:

 p{ width:200px; height:200px; background:red; border-left:5px solid pink; -moz-box-shadow:inset 0 5px green; box-shadow:inset 0 5px green; }

Check out http://jsfiddle.net/nRWux/1/

box-shaow does not work in IE8 and below.

+10
source share

You can use box-shadow for the frame,

In your example: http://jsfiddle.net/C7jnJ/

 margin-top:10px; box-shadow:0 -10px 0 10px red;

Instead of border-top. An upper border is added because the shadow is displayed outside the "p". If you want it inside then it will be: http://jsfiddle.net/C7jnJ/1/

 box-shadow:inset 0px 10px 0px red;
+2
source share

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>
+2
source share

No, removing the triangle where they meet is impossible. borders are realized in this way, and there is no way.

0
source share

More articles:


All Articles