Three Sided Border and Different colors for Border

If you need to put a border on only three sides of an element, there are a bunch of ways you can do it.

You can specifically declare the border on just three sides:



Verbose, but easy to understand.

Or, you could declare just a border which will cover all four sides and remove the one you don't want.



Much shorter, but relies on understanding and maintaining that the border removing override is kept after the border declaration.

Or, you could declare the color and styling and use shorthand only the border-width to specifically declare the three sides.



Shorter than the first example, but less repetitive. Just need to be aware if left border did acquire width it would already be red and solid.

And then there is the fact that borders affect the size of the element under the regular box model. If you wanted to add borders without adding to the size of the element, you'll need to lean on CSS3. Here is a way to do it with inset shadows:




But then inset box shadows has far less browser support than borders do. For example, the code above will only work in Internet Explorer version 9+. If you'd rather use borders, and still not affect the elements size, you could play with box-sizing, which is supported down to IE 8.

We can give different color for borders as follows.



This will give us the left border color as orange and all other sides color as olive.

This is such a small thing, but I think it is a good example of how there is so often many different ways to accomplish the same thing in CSS.
Location: Bangalore, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles with 2 pseudo-elements — :before and :a
Read more

10 Useful Libraries and Resources for Responsive Web Design

Image
Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it Responsive 2. MDN’s Responsive Web design Tutorial This is a nice MDN article about some of the basic strategies people use t
Read more

The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u
Read more