How can you shorten border length on end of a div?

HTML & CSS
1

Hi from freezing and wet York UK…

below illustrates my CSS question but here goes… On this page http://www.davidclick.com/practice/news.html Ive added a green border right to #column1 but how can i influence its length?

Put another wayI’d like the green border to run say 50% along the edge of the div centrally position if that makes sense rather than right along the total edge.

I cam across this tutorial but its got me out of my depth:
http://www.anujgakhar.com/2014/07/28/partial-borders-with-css/
and this one:
http://stackoverflow.com/questions/8572952/border-length-smaller-than-div-width

Any advice welcome :slight_smile:

826×438 325 KB

2

This can be done with border gradients:-
https://css-tricks.com/examples/GradientBorder/
Though they can be tricky.

1 Like
3

I would probably do something like this:

#column1 {
    position:relative;
    background-color: #defd90;
/*    border-right: 5px solid green; */
}
#column1::after {
    content:"";
    position:absolute;
    top:16px;
    bottom:16px;
    right:0;
    border-left:5px solid green;
}
2 Likes
4

@ronpat wow that worked thanks but I’ll be honest Ive never seen anything like this as in using a pseudo class and how you made the border sit like how i wanted is beynd my CSS understanding at the mo but thank you :slight_smile:

1 Like
5

Thanks Sam, decided to give Ronpat idea a go but thank you :slight_smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.