CSS3 lines without using images

Question

I designed the layout for my personal website. I designed lines as separators. In the layout I made two lines side by side. One is dark and one white so I've created a nice effect which I want to create by code using CSS3 without include any images.

I've attached two images to see the lines that I'm talking about.

Thanks a lot for your time guys.

Cheers!

How I can create that line using CSS3 ? I want to look exactly the same. I have no clue. — Marian Pop, Apr 18 '12 at 20:25
Which line? The top image has a horizontal line and the bottom image has a vertical line. — j08691, Apr 18 '12 at 20:30
Pictures are great but you **also** need to fully describe what you're talking about. Maybe [read this](http://sscce.org) and take another crack at writing a good question. — Sparky, Apr 18 '12 at 20:36
You need to fully describe what you want, using words (and code) as well as your pictures. That circle thing is nuts because it looks like it _could_ be part of your design. — Sparky, Apr 18 '12 at 20:41

score 2 · Answer 1 · answered Apr 18 '12 at 20:31

It's quite hard to see exactly what you mean from the screenshots -- I assume the shiny circles are your way of highlighting the bit you want to show us, but actually they make it harder make out the images properly, and they're quite low-res anyway which doesn't help. But I'll try to help anyway.

What you're asking for is fairly common. Typically you'd use CSS borders for this kind of thing.

Something like this:

border-left: 2px groove black; height: 50px; width: 2px;

This is all standard CSS; you don't need any CSS3 trickery here.

But... [CSS3 is a standard too!](http://stackoverflow.com/a/8637917/106224) :( (Of course, I know you're referring to standards that are finalized and widely supported...) — BoltClock, Apr 18 '12 at 20:35

score 1 · Accepted Answer · answered Apr 18 '12 at 20:29

1

try

div {
  width:50px;
  border-right:1px solid black;
  box-shadow: rgba(255,255,255,0.8) 1px 0px 0px;
}

answered Apr 18 '12 at 20:29

benoît

1,473
3
13
31

It's exactly what I want. Thanks a lot @benoît – Marian Pop Apr 18 '12 at 20:37
May be you can do something better, if your element are side by side use a border-left:white (or rgba) and border-right:black… – benoît Apr 18 '12 at 20:46

score 1 · Answer 3 · edited May 23 '17 at 12:13

1

I have slightly different approach. See this previous post: Two color borders

Here's an example for you: http://dabblet.com/gist/2416433

edited May 23 '17 at 12:13

Community

1
1

answered Apr 18 '12 at 20:42

chicagoing

326
2
5

CSS3 lines without using images

3 Answers3