Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tiffany McAllister
Tiffany McAllister
25,806 Points

Part of a border only?

I am currently working on a project and the design requires a part of a border as shown in the following image: https://dl.dropboxusercontent.com/u/10434869/border.jpg

Is this possible? If so, what would be the best way to achieve it?

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Tiffany,

You can absolutely do a border like that using only CSS. I wrote up a Codepen that shows you a way to do it. Notice that both paragraphs are using inline-block display and that I'm using margin and padding for separation. In paragraph 1, it has its border-right property set, and I used an rgba value to achieve a very light gray border. This is the easiest way to get that border.

http://codepen.io/anon/pen/mJBobr

Tiffany McAllister
Tiffany McAllister
25,806 Points

Thanks Marcus! It's a good solution if both paragraphs are similar heights. When one is longer than the other it doesn't quite work as I would like it to, but for this project it's a good solution! Thanks!

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome, Tiffany, but that was but one way to add that kind of border. Here's a fork I made of that pen that uses a different way that gets you that border and is much closer to what you originally wanted. I added an empty element in between the two paragraphs and manipulated its margins and padding. Notice that I set an explicit height on the empty element so that its border properties would appear. Without an explicit height, the border will not appear.

http://codepen.io/anon/pen/GJMbor

Nurul Ahsan
Nurul Ahsan
2,039 Points
Nurul Ahsan
Nurul Ahsan
2,039 Points

Hello, Tiffany McAllister. I have tried to create the border using only CSS.

http://codepen.io/nurulahsan/pen/WvZmZK

Marcus Parsons
Marcus Parsons
15,719 Points

Nurul, you literally copied every portion of my code except that you added a bit of margin/padding to the body and changed the paragraphs to float left and right, which means you also need to add a clear fix. With inline-block, you don't have to add a fix for any other content. Why in the world did you copy almost exactly what I did, though? That truly boggles my mind lol.