Thin Black Line using CSS

[inderpal.singh]

Hi All,

I have just started working with CSS. Is it possible to create a thin black line that should run straight along the bottom of the links and then should curve up along the left.

I would appreciate if someone please give me pointers to the above problem. Thanks in advance.

Best Regards,
Inderpal Singh

[buzza_gts]

Can you give a link to an example of somthing similar to want you want to achieve?

[Tijmen]

I haven't try'd it, but it should be possible if you specify the border-left and border-bottom for the link in the css file.

You would get something like this

border-left:1px solid #000;
border-bottom:1px solid #000;

[Tyssen]

It won't curve up though - you'll need to use an image for that.

[inderpal.singh]

Thanks everybody for replying. But is there any way to do that without using image or if somebody know from where I can get the image because I dont know how to create images.

Regards,
Inderpal Singh

[Tyssen]

If you don't know how to create images I imagine you'll struggle with the complex CSS and/or javascript that's required to create rounded corners without images.

[molona]

If you really want to do it without images, then you need a browser that understands CSS3, like Firefox.

You have to be aware that CSS3 is still a draft, and that not all properties are applied. IE doesn't apply this one, so you will be restricted to get the exact look in those browsers only.

Other way would be to go for SVG (which is a W3C standard). Mozilla web browsers understands SVG natively, and IE can use Adobe SVG's plug-in. Again, you'd be restricted to the capabilities of the browser.

That's why we all use images to create rounded corners.

Creating it is easy, but you do need the appropiate software (although most of the people use photoshop, any will do (you may even try to use paint, or photopaint, which normally come with Windows).

There are also a few free image creation programs around (furthermore, I remember that there was a thread in this section that spoke about them) but I can't give you names as I use photoshop.

[inderpal.singh]

Thanks moolna for your effort and time. Could you give me some pointers to make it work in CSS3 or SVG...

Regards,
Inderpal Singh

[Egor]

Is it possible to create a thin black line that should run straight along the bottom of the links and then should curve up along the left.

Edit:


Something like this? IE doesn't play too well when a link is spread over multiple lines. That can be worked around with:

        white-space: nowrap;

[inderpal.singh]

Thanks a lot Eqor. Yeah I want like that only.......

Regards,
Inderpal Singh

[molona]

Thanks moolna for your effort and time. Could you give me some pointers to make it work in CSS3 or SVG...

Regards,
Inderpal Singh

I think that Egor provided a better answer. I misunderstood what you wanted. Sorry. I thought that you wanted a thin line under you links... but I thought that those links were part of a menu...

Still, if you want to check SVG, just go to www.w3.org for the official specification.

[inderpal.singh]

Hi,

I was happy to see that site and the thin curve line beneath the links but when I see the code, it was an image they are using. I tried to edit that image to make it black but failed, somehow. Could somebody please tell me how to change that to black?

Thanks a ton in advance.

Regards,
Inderpal Singh

[molona]

They would be using two images. One for the link, and another one of a different color for the :hover effect.

[Egor]

Hi,

I was happy to see that site and the thin curve line beneath the links but when I see the code, it was an image they are using. I tried to edit that image to make it black but failed, somehow. Could somebody please tell me how to change that to black?

Thanks a ton in advance.

Regards,
Inderpal Singh

You're going to have to learn to use an image editor if you want to get anywhere my friend.

[inderpal.singh]

Thanks Eqor for your effort and time. Surely, I'll learn to use an image editor.......

Regards,
Inderpal Singh