CSS Border style colors

Tags: Css, Web Development, Css Borders, Inset Border, Outset
Email this Topic • Print this Page

Read Question
Reply to All

Is there a was with CSS to change the color of the border color for both colors when you have an inset or an outset? I don't want to just do border-right border-left thing because if I do that, I don't get the inset/outset 3D part.

Topic Stats
Top Replies
Link/Embed

Type: Question • Score: 0 • Views: 789 • Replies: 2

[+2] - Robert Gentel - 09/22/2008It's not clear to me what you are trying to do. You can set the color of the border while using an inset or outset but the inset/outset just takes that color and uses a light version of it for some...
[+1] - Nick Ashley - 09/22/2008Robert is correct. If you want to be more specific with your colors, you can set each border's color individually, and create the inset/outset yourself. For example, this: [code].outsetBorder{...

@meesa,

It's not clear to me what you are trying to do. You can set the color of the border while using an inset or outset but the inset/outset just takes that color and uses a light version of it for some borders and a dark version of it for others to show an illusion of 3d depth to it.

Here is an example:

Code:



<html>

<head>

<style type="text/css">

.theBorder

{

border: medium inset red;

}

</style>

</head>

<body>

<div class="theBorder">An Example Border</div>

</body>

</html>

0 Replies

Robert is correct. If you want to be more specific with your colors, you can set each border's color individually, and create the inset/outset yourself.

For example, this:

Code:

.outsetBorder{

   border:1px outset red;

}

is the same as this:

Code:

.outsetBorder{

   border-top:1px solid #FFB2B2;

   border-left:1px solid #FFB2B2;

   border-right:1px solid #8D0000;

   border-bottom:1px solid #8D0000;

}

So you are creating the same effect, but that way can control your colors specifically. This will also ensure the borders look the same in all browsers. I am not 100% sure that doing "1px outset red;" will render the same in all modern browsers or not. (I'd guess it will, but haven't tested it)

0 Replies

Read Question
Reply to All

CSS Border style colors

Related Topics