?
Solved

Inner border for a div?

Posted on 2006-04-04
7
Medium Priority
?
7,029 Views
Last Modified: 2012-08-13
Hi,

Is there any tag for creating a 1px inner border for a div? I know we have the normal border itself, anything for an inner border? If not, what's the simplest way to get such an effect?

Thanks
0
Comment
Question by:minnirok
  • 5
  • 2
7 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16376855
Hi minnirok,

I think this might be a little crude but how about a little border div:
[html]
<div id="main">
  <div id="border">
  ...
  </div>
</div>

The style of the border domain giving a slight padding and the border
[css]
div.border
{
  padding: 1px;
  border: 1px solid black;
}

I don' think that is what you want but its a suggestion.

Joe P
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16376857
instead of padding it shold probably be margin: 0;
0
 
LVL 7

Author Comment

by:minnirok
ID: 16377011
That could work, I was thinking I'd have to do this since I've never seen an inner border style attribute. I'm trying to change the border color dynamically with javascript, and this works in IE:

    document.getElementById("div_5").style.borderWidth = '2';
    document.getElementById("div_5").style.borderColor = 'red';

No luck in firefox, any ideas?

Thanks
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 17

Accepted Solution

by:
BogoJoker earned 500 total points
ID: 16377062
That should work, just it should be:
document.getElementById("div_5").style.border-width = '2';
document.getElementById("div_5").style.border-color= 'red';

Here is a good source for all the tags:
http://www.w3schools.com/css/css_reference.asp#border
Notice that it moves you right to the border CSS attributes on that page, but that should be ALL CSS2 thingies

=)
Joe P
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16377069
That border-width should probably have units:
2px
I tryed to fix it before I submitted, apparently not =)
0
 
LVL 7

Author Comment

by:minnirok
ID: 16377075
aweseome thanks as always
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16377086
No problem =)

Joe P

Note: Although the comment you accepted was good, try to accept the comment that was the answer to the question, [int his case probably the first comment], that way if someone searchs the site in the furute, they will find the same solution.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question