transparent border


I'm wondering how I can use a transparent border like this one around the image. I think we can do it CSS, right? Will it work with IE 7>, Firefox 3.x>, Opera, Safari, Chrome?

Maybe there is a javascript code for doing this or jquery plugin?

Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
Julian MatzConnect With a Mentor Joint ChairpersonCommented:
Have a look at the background image they used:

You'll see the whole border there is actually part of a PNG graphic. It looks like a white stroke around the rectangle and then set to about 20 / 30 percent alpha / opacity.

Fairly simple to do in Photoshop, and will work in all of the latest browsers.
Gurvinder Pal SinghConnect With a Mentor Commented:
it should be border-color:transparent
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

You can set border color same as backgound color
Aaron TomoskySD-WAN SimplifiedCommented:
You can use margin or padding with borderstyle none to get the placement you want
Victor KimuraSEO, Web DeveloperAuthor Commented:
Sorry, I forgot to add the link. I'd like to achieve this transparent border:

Gurvinder Pal SinghCommented:
<<I'd like to achieve this transparent border:>>
which one?
Marco GasiConnect With a Mentor FreelancerCommented:
You have to create a png image that represent the entire div, the white rect and its rounded border: all this you can do in Photoshop. Then you set this image as background. CSS3 allow to draw rounded corners but I don't think they allow to use semitransparent effect as you wish and allin all they still have a poor support by browsers, so using images is still the best crossbrowser solution.

Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi julianmatz,

Where did you see that slider.png in the code? I tried to look at the source to view the code surrounding this background image but I couldn't find it.

Marco GasiConnect With a Mentor FreelancerCommented:
In order to view that image you have to use Firefox and the WebDeveloper Toolbar addon. With this addon you can examine the css file and there you find slider.png set as background of slider-wrapper element: As I said in my post ID:35004237 using an image as  background is the best solution to your question.

Victor KimuraSEO, Web DeveloperAuthor Commented:
Thank you.
Julian MatzJoint ChairpersonCommented:
No, what I did was very simple actually. In Firefox, I put the mouse cursor right over one of the edges of the border, clicked the right mouse button and then selected "View Background Image". That gave me the URL of the image.

If you'd like to see the CSS used for it, I recommend installing the Firebug extension for Firefox. It's even better than the Web Developer extension for viewing CSS as it gives you a breakdown of both HTML and CSS side by side. If you then click on a HTML element, it will show you the element on the screen and will also show you all the relevant CSS rules.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.