Photoshop Question posted in
The official user guide can be found here.

Horizontal Divider Carved Lines – Photoshop

I’ve been trying to achieve horizontal dividing that looks like carved lines in CSS3.

I’ve tried

border-bottom: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.5);

Messed around with some colors and opacity but I just cannot seem to get the right combination. I can do this on photoshop easily.
What i’m trying to achieve is this:

enter image description here

Tags:

2

Answers


  1. 0

    Using border-top and border-bottom properties, you could set the values separately.
    For instance:

    hr {
    border: 0; /* reset the default stylesheet */
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-top: 1px solid rgba(0,0,0,0.5);
}

    WORKING DEMO.

    Login or Signup to reply.
  2. 0

    The border-style of groove is meant to do this.

    Try

    hr {
    border-bottom: 2px groove;
}

    The opposite of groove is ridge, and there are also styles inset and outset you can try for similar or other effects.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search