Possible to Fade Out Div Border

Fade borders in CSS

You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.

However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.

A quick google turned up these two pages which should help you on your way:

• CSS3 Gradient Borders
• http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

Hope that helps.

how to fade-out/blur div's borders with css?

box-shadow IS actually the only CSS way to get this effect. Try something like this:

div {  margin: 25px 10px;  width: 100px;  height: 100px;  background: #141414;  box-shadow: 0 0 15px 10px #141414;}

<div></div>

Possible to fade out div border?

A real fade out animation would require us to use the alpha channel.
AFAIK jQuery UI's use of rgba() is very buggy, so we can use the step property to change the opacity of the border like this:

setTimeout(function(){

    var div = $('.confession');
    $({alpha:1}).animate({alpha:0}, {
        duration: 1000,
        step: function(){
            div.css('border-color','rgba(0,0,0,'+this.alpha+')');
        }
    });

}, 5000);

I used a black border so you can notice the effect, but you can change it to whatever color you want, for example rgba(221,221,221,'+this.alpha+')'); for #DDD

Working example: http://jsfiddle.net/victmo/2Xazx/

Cheers!

BTW, no plugins needed for this approach...

jQuery css border fadeout effect on div

If you are happy with an CSS3-Only Solution, try the new transition-Feature (not supported in older browsers).

Otherwise, try to set the color with jQuery using the .animate Function.

ui.item.children("#mybox").animate({border-color: "#efefef"}, 500);

EDIT: For the jquery Solution, you need jQuery colors, as stated in the comment!

How to fadeout borders and bgcolour of a div after some time of pageload?

This looks like a great use for CSS3 'transition' property if you want to keep the 'fade' effect but not fade out the div itself.

jQuery:

setTimeout(function(){
    $('#abc').fadeIn();
    $('#abc').addClass('noHighlight');
},1000);

CSS:

#abc {
   background-color:#FFFF99; 
   border:1px; 
   border-style:solid; 
   border-color:#000000;
   transition:all 1s;}

#abc.noHighlight {
   background:transparent;
   border-color:transparent;}

HTML:

<div id="abc">
     Hello, i want to stay, i don`t my borders and bg.
<div>

JSFiddle: https://jsfiddle.net/rh11wgw5/

Removing fade effect from border css

It's always gonna look 'faded' until you add the rest of the border attributes for bottom, top, and right.

.border {
   min-height: 500px;
   min-width: 500px;

   border-left: 2px dashed #c6c6c6;
   border-right: 2px dashed #c6c6c6;
   border-bottom: 2px dashed #c6c6c6;
   border-top: 2px dashed #c6c6c6;

   border-radius: 10%/200px;
}

When you only specify one, the web browser has to determine when exactly to start and stop drawing the left border, and with a lot of curvature there's really no one obvious point for stopping, so it fades the border out gradually as a compromise :p

Fade in border on hover

When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc

Solution: Try setting border to transparent first, so it's there but cannot be seen:

a {     border-bottom: 2px solid transparent; /* <- here */    transition: border-bottom 1s;    text-decoration: none; /* I added this for clarity of effect */}a:hover {    border-bottom: 2px solid red;}

<a href="">testing border</a>

CSS fading top and bottom borders

Do you want something like this?

Demo (Some breathing space for your content, I've used margin there, just make sure that it will apply to both, :before as well as :after, so if you want to separate, declare margin separately for each, p.s - I've made colors lil lighter)

/* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    margin: 40px auto;
}

.one:before, .one:after {
    content: "";
    height: 1px;
    /* I've removed the vendor prefixes, if you are looking to support older browsers
       then refer to older version of this answer.
    */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

Explanation:
I've used :before and :after pseudo having content: "", so it creates a block, you can say a virtual block inside the element... and which is further set to display: block, just make sure you use block there else margins and height will have no effect.. and last but not the least am using gradients with rgba to control the alpha/opacity of the gradient which will fade on both ends

---

Related Topics