+ 1

CSS borders

Is there any way to get translucent borders??? I mean why " border: 3px solid rgba(0,0,0,0.x); " is not working for me???

22nd May 2018, 3:44 PM
Ayush
Ayush - avatar
6 Answers
+ 10
there are a possible way to make a translucent border, but it will make the whole element you select become translucent too. border: 3px solid black; opacity: 0.6;
22nd May 2018, 3:53 PM
Amethyst Animion
Amethyst Animion - avatar
+ 8
Ayush Gupta it's better to show your code here
22nd May 2018, 3:54 PM
Amethyst Animion
Amethyst Animion - avatar
+ 6
have you tried this: border: 3px solid rgba(0,0,0,1);
22nd May 2018, 3:51 PM
Amethyst Animion
Amethyst Animion - avatar
+ 6
Ayush Gupta what do you said with box-shadow is good, but you will miss all border style such as ridge, double, dotted, dashed, etc. have you ever use <button> tag? I knew it use a default border
22nd May 2018, 4:13 PM
Amethyst Animion
Amethyst Animion - avatar
+ 2
what I just found was that we can achieve the same thing using the box-shadow property: box-shadow: 0 0 0 10px rgba(0,0,0,0,0.5); that worked well for me...
22nd May 2018, 3:56 PM
Ayush
Ayush - avatar
+ 1
Like you did, rgba should be the way to go for this effect. I've just tried it and it worked border : 3px solid rgba(0,0,0, .2) for instance is working flawlessly
22nd May 2018, 3:52 PM
CHMD
CHMD - avatar