: Is there a rule of thumb or some guidelines for deciding what colour to use for a border? What's the border color paradigm in terms of color schemes and background color? Some borders look

@Samaraweera207

I think the only way for you to decide upon a colour - and other characteristics - is to evaluate the purpose of the border. It must have a purpose, even more than one; if it doesn't it's unnecessary.

A distinction that I think is important, is that despite being called simply a border by CSS, you are actually defining a border stroke.

The definition of a border in this context is simply: “The edge or boundary of something.”

The distinction is important because, even with no border stroke, you still have a border. Whether the border is visible depends on whether the colour around the border is the same or different. Look at the 'Hot Network Questions' element on the right of this page (only visible on the desktop version). It has no border stroke, but it clearly has a border.

If you're adding a border stroke because you saw it on a nice design somewhere else, I can categorically state that you need to learn more about design.

Judging it on its own merits, the border is inconsequential, what it is intended to do should define how you implement it.



A few pointers that may help you to decide what you want to do; this is not a full list of purposes to use a border stroke; I'll add more when I think of them:

Is it to make the element stand out from everything else?


You'll need strong contrast to achieve this.
The strongest contrast between colours is achieved by using the directly opposing colour on a standard colour wheel. It's not what I'm recommending, just information to help you understand.


To separate elements?


Probably best to use grey, or very washed out colours, so as not to detract from the content itself.
This could also be achieved simply by considering the elements proximity to unrelated elements, and adding more white space.


To create a sense of depth?


Using borders to create depth would likely involve using lighter tints and darker shades of the background colour - as sort of bevelled edges, or 'popping out' like a button.
This could also be achieved by using a soft drop shadow and gradient, or a combination of all three.


To add visual interest?


There are no guidelines for this, it is mostly reliant upon your understanding of design and your creative talent.




Things to consider:


The thickness of the border is intrinsically linked to the colour you choose. What you need to understand is difficult to describe; the volume and proportions of a coloured element will contribute to how the colour is perceived. For example, a large block of yellow can look darker than a thin line of the exact same yellow depending on the other elements in play.
You can use borders without strokes, as they have on this site, to separate items effectively.
The more border strokes you use, and the more they contrast, the more noisy the design will get.




I personally can't remember the last time I used a full border stroke wider than 4px (except for development purposes). When I do stroke, I tend to add it to one side, often the bottom. This is my style though, and I rarely do it anyway.

In summary, your question reveals to me that you need to learn more about design overall, a border itself is highly arbitrary (I linked a useful question in my fifth paragraph).

I have tried to provide a basic direction, but you really should do some independent research - different writing styles appeal to different people, what I like to learn from (books and internet), may bore a hole in your skull, but you may find a wacky author that describes things in a way you understand much better or a series of podcasts, videos, etc. - that's why I recommend independent research.

This site is a great resource for all levels of graphic design, so I recommend and hope that you stick around and grow with us. :)

Hope I've helped, now I'm going to chow down. Everyone, feel free to add to this post or make significant edits.

Vote Up Vote Down