1

I want to draw a line using CSS 3 and place it under an element. The obvious choice for this is the border-bottom, which I set to solid. The resulting line is a little bit thicker than I want it. Is there a way I can make it thinner?

Edit:

The code. (Sorry, late night sloppiness)

    border-bottom: 1px solid #454;
4
  • Where is your code? Are you using border-bottom: 1px #color solid ?? Are you using 1 pixel right now? Feb 22, 2012 at 1:38
  • The lines separating these comments use border: dotted 1px; to appear thinner, as noted by Aron
    – calebds
    Feb 22, 2012 at 1:40
  • Sorry fellas, I actually had it set for 2 px. I dont know how I missed that. In any case, 1 px is a lot like what I am looking for.
    – n_x_l
    Feb 22, 2012 at 1:43
  • I edited the code. The workaround Aron suggested in his answer did the trick.
    – n_x_l
    Feb 22, 2012 at 1:48

3 Answers 3

7

Please, at least show us your code.

What does your CSS say?

1px is the smallest possible line, as in:

border-bottom: 1px solid #000;

but you can give the illusion of beeing smaller with blending the border colour to the background colour or using the dotted style.

border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px dotted #eee;
border-bottom: 1px solid #ccc;
/*etc...*/

might look a little thinner.

1
  • Thanks. I was looking for a workaround like this. And code is added.
    – n_x_l
    Feb 22, 2012 at 1:46
1

If you are using sass, you can easily use the lighten function e.g

$color: #454;
lighten($color, 20%);

Adjust the % to suit how light you want it.

0

border-bottom: 0.5px solid #ccc;

you can use values between 0.1 to 0.9 to make it smaller

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.