customize the 2 colors in css border style

I have this JSFiddle

<div class="boo">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

CSS

.boo{
   border-left: 12px ridge red;
}

and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..

Answers


To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph

example fiddle: http://jsfiddle.net/uyTd7/1/

CSS

.boo {
    border-left: 6px solid red;
}

p {
    border-left: 6px solid blue;
}

But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.

p {
    border-left: 6px solid red;
    box-shadow: -6px 0 0 blue;
}

example fiddle: http://jsfiddle.net/7cq78/1/


There are several ways you can add another 'border'

1. Using outline (wont work with rounded corners though) http://www.w3schools.com/css/css_outline.asp

2. Using :after & :before

:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity

3. Border style & image

There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border


try this

.boo{
    border-left: 12px solid red;
    outline:12px solid darkblue ;
}
p{
    padding-left:10px;
}

one limitation is IE6 and IE7 don't support the outline property.


Need Your Help

Saving data so it can be loaded locally

ios iphone

I'm working on iphone application which needs to run offline at an exhibition. It should present data, stored local because there is no internet at the booth. Still, to easily have content updates it

Create storyboard screen with two inherit classes

ios objective-c inheritance tableview viewcontroller

I'm new in iOS programming and I have a problem with connect in one screen two separate screen models. I have an table view and typical view controller. When I want control elements of this screen, I