I've got a challenge for you all. I'm trying to make the following shape without using any
What's difficult about it (impossible?) for me is the double border. Sure, I could put some other shapes over the cutouts but then the border lines would be disrupted. Anyone got any ideas?
I believe that SVG is the way you should go. However, just to see if it was possible, I decided to make this shape using pure HTML and CSS.
Here's the fiddle.
HTML
<div id="wrap">
<div id="mainshape"></div>
<div id="upperleftcut"></div>
<div id="diamondcut"></div>
</div>
We will be using 3 shapes here, and they'll be positioned inside a wrapper that will act as the overall shape. The two cutaways are their own divs.
CSS
#wrap {
width: 206px;
height: 150px;
position: relative;
overflow: hidden;
}
#upperleftcut, #mainshape, #diamondcut {
position: absolute;
background-color: white;
border-style: double;
}
#upperleftcut {
border-style: none double double none;
width: 100px;
height: 20px;
}
#diamondcut {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
width: 30px;
height: 30px;
left: 197px;
top: 50px;
border-style: double;
}
#mainshape {
border-style: double;
background-color: white;
width: 200px;
height: 144px;
}
The CSS property you are looking for is border-style: double;. The divs have each been absolutely positioned within the wrapper, and the diamond one has been rotated to form the desired triangle cut.
Conclusion
This would be far easier to do with an SVG, and far more flexible as well. The borders here between the different shapes also don't line up nicely. Don't do this with CSS, but know that you can.
As far as I can tell, you can't get rid of those border overlaps.
I answered to something simular using box-shadow to draw borders and cut off background a couple of days ago.
Here , i come with something close to your drawing http://codepen.io/gc-nomade/pen/lqzcm
div {
margin:3em;
border:1px solid;
box-shadow:inset 0 0 0 4px white,
inset 0 0 0 5px black;
min-height:10em;
position:relative;
background:pink;
}
div:before {
content:'';
display:inline-block;
float:left;
width:5%;
height:2em;
height:12vh;
background:white;
box-shadow:
-1px -1px white,
2px 2px 0 2px white,
1px 4px 0 0 black,
4px 5px 0 0 black,
5px 4px 0 0 black,
inset -1px -1px 0 0 black;
}
div:after {
position:absolute;
content:'';
height:32px;
width:32px;
background:white;
box-shadow:1px 1px 0 0 black,
4px 4px 0 0 white,
5px 5px 0 0 black;
right:0;
top:3em;
margin-right:-18px;
transform:rotate(135deg);
}
Related
I have a problem where I need to make a border-bottom, with a given offset in CSS
for example, in this JSFiddle, I have a black border-bottom.
https://jsfiddle.net/uexma4o6/343/
<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>
but I want to give an offset to this 2px solid black border to be 5px above from where it is.
Is it possible?
This can be done with a linear-gradient:
.box {
background:
linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
You can also do it like this:
.box {
background:
linear-gradient(black,black) bottom/100% 2px no-repeat,
lightcoral;
border-bottom:5px solid lightcoral;
width: 500px;
height: 40px;
box-sizing:border-box;
}
<div class="box"></div>
Another idea with box shadow:
.box {
background:lightcoral;
border-bottom:2px solid black;
box-shadow:0 5px 0 lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
And with inset shadow:
.box {
background:lightcoral;
box-shadow:
0 -5px 0 lightcoral inset,
0 -7px 0 black inset;
width: 500px;
height: 40px;
}
<div class="box"></div>
Solution
https://jsfiddle.net/StephanieSchellin/j7pmxkc3/
Use CSS ::after to add a pseudo element that has the border you are looking for. Then move the pseudo element around to position it how you like. This pseudo element will always be tied to its root element but you still have to take into account modifying it for #media query changes and such.
You see in the image below that this solution is layering the pseudo element over the root one. You can choose to use ::before or experiment with other positioning setups to accommodate your layout needs.
Always do plenty of cross browser testing when doing edge case things like this because its possible you will run into box model issues.
HTML
<div class='the-div'></div>
CSS
.the-div {
width:500px;
height:40px;
background-color:lightcoral;
position: relative
}
.the-div::after {
border-bottom: 2px solid black;
content: '';
width:500px;
position:absolute;
bottom:5px;
}
Further Reading
See https://css-tricks.com/pseudo-element-roundup/
There are lots of cool things you can do with pseudo elements.
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
Is it possible to create a button that look like this in CSS:
Of course I don't mean using an image as background, I can easily do that. I'm talking about the webkit type of solution.
The short answer is yes, it can be done. I went ahead and gave it a shot.
These are the steps I took:
I opened your bitmap in Sketch, my favorite graphical tool for all things web
I zoomed in to your bitmap, traced the outline with a rounded rectangle and gave it the correct color
I started adding box-shadows, both outside and inset, to replicate the bitmap as close as possible. Note that I only used black and white (with varying alpha values) for the box shadows. This way you can easily change the color of the button by just changing the background-color.
I also added two extra shapes for the bottom shadow and the top glow, as I did not manage to get this right with just box shadows. As long as it are just 2 elements that should not be a problem however, you can use the :before and :after pseudo elements to include these in your css.
The resulting image looks something like this (not exact, but pretty close I think):
And then I translated the drawing to css, by choosing 'copy css attributes' and manually adding the :before and :after elements and doing some fine tuning. This is the (unprefixed) css I came up with:
.button {
display: inline-block;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,.3);
font-family: sans-serif;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
padding: 8px 16px;;
font-size: 12px;
line-height: 14px;
position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
content: '';
display: block;
position: absolute;
left: 2px;
right: 2px;
height: 3px;
}
.button:before {
top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: rgba(255,255,255,.6);
box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,.15);
box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
and a fiddle to demonstrate: http://jsfiddle.net/pn4qk3wL/
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
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.
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.
This is very possible. It just takes a little CSS trickery!
div.border {
border: 1px solid #000;
position: relative;
}
div.border:before {
position: absolute;
display: block;
content: '';
border: 1px solid red;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>
Is that what you are looking for?
Another way is to use box-shadow:
#mybox {
box-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
-moz-box-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
-webkit-shadow:
0 0 0 1px #CCC,
0 0 0 2px #888,
0 0 0 3px #444,
0 0 0 4px #000;
}
<div id="mybox">ABC</div>
See example here.
Have you tried the different border styles available within the CSS spec? There's already two border styles that might accommodate your need:
border-style: ridge;
Or
border-style: groove;
Outline is good, but only when you want the border all around.
Lets say if you want to make it only on bottom or top you can use
<style>
#border-top {
border-top: 1px solid #ccc;
box-shadow: inset 0 1px 0 #fff;
}
</style>
<p id="border-top">This is my content</p>
And for bottom:
<style>
#border-bottom {
border-top: 1px solid #ccc;
box-shadow: 0 1px 0 #fff;
}
</style>
<p id="border-bottom">This is my content</p>
Hope that this helps.
Instead of using unsupported and problematic outline just use
background-color + padding for the inner border
normal border for the outer one.
Example:
HTML:
<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
CSS:
img {
padding: 1px;
background: yellow;
border:1px solid black;
}
TEST(JSFiddle):
img {
padding: 1px;
background: yellow;
border: 1px solid black;
}
<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
If by "embossing" you mean two borders around each other with two different colours, there is the outline property (outline-left, outline-right....) but it is poorly supported in the IE family (namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would indeed be best.
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.
Adding the following CSS properties to a border will achieve a double border of two distinct colors and identical widths for those who are interested.
Example:
Selector {
border: 10px red;
border-block-start-style: ridge;
border-inline-start-style: ridge;
border-inline-end-style: groove;
border-block-end-style: groove;
}
Not possible, but you should check to see if border-style values like inset, outset or some other, accomplished the effect you want.. (i doubt it though..)
CSS3 has the border-image properties, but i do not know about support from browsers yet (more info at http://www.css3.info/preview/border-image/)..
Simply write
style="border:medium double;"
for the html tag
You could use
<html>
<head>
<title>Two Colors</title>
<style type="text/css">
.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
padding: 4px; outline: 1px solid green;
}
</style>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
background-color:yellow;
}
</style>
</head>
<body>
<a target="_blank" href="people.htm">
<img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
</a>
</body>
</html>
This produces a nice effect.
<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
internal stuff
</div>
</div>