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

Hi from freezing and wet York UK…

below illustrates my CSS question but here goes… On this page 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:
and this one:

Any advice welcome :slight_smile:

This can be done with border gradients:-
Though they can be tricky.

1 Like

I would probably do something like this:

#column1 {
    background-color: #defd90;
/*    border-right: 5px solid green; */
#column1::after {
    border-left:5px solid green;

@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

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

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