Navigation Menu
Alphabetical Listing
Site Contents

Site FAQ
About JSS
JavaScript Forum
JavaScript Tutorial
Friends of JSS

Link to Us
JavaScript Help
Contribute a script
Technology Jobs

Become a Partner

Internet.commerce

Be a Commerce Partner


Developer Channel

FlashKit.com
JavaScriptSource
Developer Jobs
ScriptSearch
WebDeveloper.com
Webreference
HTMLGoodies
HTML5 Dev Center
Developer.com
jGuru.com
PHPBuilder

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!


Hiermenus Central


Promotions

Free Announcements


Social Bookmark

General

This script creates rounded corners with a drop shadow without using images. You can use different formats on the same page. Highly customizable. Non-obtrusive.


Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Note: This is plain, without the script. Lorem ipsum dolor sit amet, consecte adipiscing elit.

Notes

It is important that it uses the CSS class "sb" and that it does not directly contain text nodes, i.e. text must always be wrapped inside an HTML element.

Since the script adds DIV elements to the element you round, those elements cannot be UL, OL, TABLE, TR, etc.. Allowed are DIV, LI, TD, TH, i.e. those elements that are allowed to directly contain DIV elements.

Further details can be found on the author's Web site.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: shadedBorder.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


User Comments

Add a comment, suggestion, or correction
[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]

    
   
       
[optional]
 
[optional]

   

Comments feed Comment Feed RSS 2.0

9. From: Victor Velle
problem with the code
01/19/2008 19:04:02

If I try to put in an image within the body of the text using an image tag, it doesn't show.

Additionally, when I view the page the first time, utlizing the code, the bottom border is dysfunctional. If I move to another tab for a moment or switch windows for a short time, the issue resolves itself (border only, but not image issue.)

I do like the effects, but in its present state, I don't believe it will work for me.

If I am overlooking something obvious, please let me know.

10. From: Lee Underwood (Admin)
01/29/2008 12:52:36

Due to the limitations of these comments, you will need to submit your question to the JavaScript Forum for further help.

7. From: Scott
Rounded
09/24/2007 22:07:00

How do I make the corners round? Thank you so much.

8. From: Lee (Admin)
11/06/2007 11:53:35

It's right in the script. You need to change the class.

5. From: mandy
09/22/2007 15:34:18

I cannot get this to work, any help welcome.

6. From: Lee (Admin)
11/06/2007 11:52:10

You will need to submit your question to the JavaScript Forum for further help.

4. From: mike
nice
09/17/2007 11:19:33

Nice script. Sure looks alot better than the plain blocks and a way faster loading time than using images.

Thanks, Mike

3. From: whoop-t-ding
Isn't this a bit drastic?
09/16/2007 22:48:57

I think the idea is novel, but the internet is a lot faster than it was in the 90's, if that's the reason for "drop shadows" without using images.

It's a neat-O example of what can be done with Javascript, but it doesn't quite compete with slick Photoshop images and good ol' CSS.

I can crank out text container boxes with drop shadows rapidly without touching Javascript.

Again, it's a fun idea...but I'll never use it. And to whoever created this script - good job, I guess.

1. From: Arun
Really good.
09/10/2007 03:05:51

Man, this is just superb. Otherwise i would have to create images for every colour i want to use. Thanks,

2. From: Lee (Admin)
10/03/2007 15:54:48

Great! You might just fire off an e-mail to the author also.


Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.