Breadcrum Item Arrows

I've been playing with Item Arrow, Outer/Inner in the Breadcrumb properties, but I really haven't been able to figure out how it works. What I want to do is control not only the solid color of the arrow, but also that of the border surrounding it. So far I have only been able to control the arrow's color (by setting Item Arrow, Inner, Left=Solid 12px, to whatever color I want).

I've been experimenting with changing various colors and settings on Inner/Outer Item Arrow, but I still really have no clue how these work or interact.
 
I haven't had much luck getting this to work. Right now what I have looks like the below. I was trying to start by seeing if I could make the left border of the blue arrow turn red, by putting in border-left-color:#ff0000;
arrowse.jpg


I have this:

.breadcrumb .crust .arrow
{
@property "breadcrumbItemArrowOuter";
border-width: 12px;
border-style: solid;
border-top-style: solid;
border-right-width: 1px;
border-right-style: none;
border-bottom-style: solid;
border-left-color:#FF0000;
display: block;
position: absolute;
right: -12px;
top: 0px;
z-index: 50;
width: 0px;
height: 0px;
@property "/breadcrumbItemArrowOuter";
}

.breadcrumb .crust .arrow span
{
@property "breadcrumbItemArrowInner";
border-width: 12px;
border-style: solid;
border-right-width: 1px;
border-left-color:#0000FF;
display: block;
position: absolute;
left: -13px;
top: -12px;
z-index: 51;
white-space: nowrap;
overflow: hidden;
text-indent: 9999px;
width: 0px;
height: 0px;
@property "/breadcrumbItemArrowInner";
}
 
Well ideally I'm looking for fine-grained control over the borders of the blue triangle above. For example, in this Xenforo forum we are posting on here, there is a 1px wide " > " outline feeding from "Home" into "Forums". I'm not really sure how to do that kind of thing; I can only get a solid colored triangle (blue in my example above).
 
Top Bottom