Menu
Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to avoid stacking two DOM elements with individual borders.
567
If you mean using two colours in the same border. Use e.g. border-right: 1px white solid; border-left: 1px black solid; border-top: 1px black solid; border-bottom: 1px white solid; there are special border-styles for this as well ( ridge , outset and inset ) but they tend to vary across browsers in my experience.
Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.
To achieve a multi-color border like shown above, we will use the position property and the ::after selector with a color gradient. First, we will make a header area using a HTML <div> class and then we will style it with CSS to have a multi-color border dividing it and the content below.
Yep: Use the outline property; it acts as a second border outside of your border. Beware, tho', it can interact in a wonky fashion with margins, paddings and drop-shadows. In some browsers you might have to use a browser-specific prefix as well; in order to make sure it picks up on it: -webkit-outline and the like (although WebKit in particular doesn't require this).
This can also be useful in the case where you want to jettison the outline for certain browsers (such as is the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the shadow; in FireFox it is outside, so -moz-outline: 0 is useful to ensure that you don't get a gnarly line around your beautiful CSS drop shadow).
.someclass { border: 1px solid blue; outline: 1px solid darkblue; } Edit: Some people have remarked that outline doesn't jive well with IE < 8. While this is true; supporting IE < 8 really isn't something you should be doing.
56
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
