CSS Border style colors

Forums: Css, Web Development, Css Borders, Color, Border
Email this Topic • Print this Page

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 to this Topic

Type: Question • Score: 0 • Views: 16,892 • Replies: 4
Topic Closed

[+3] - 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...

@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

@meesa,

color for the border:
div {border-color: coral;}

style for the border:
div {border-style: dotted;}

0 Replies

@meesa,

hello,
by this css code you change your border color.
.color{
border-color : red;
}
<html>
<head><title></title></head>
<body>
<div class="color">css border style colors</div>
</body>
</html>

Thank you,

0 Replies

CSS Border style colors

Related Topics

Quick Links

My Account

able2know