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

How to create a 4 corner, rounded divider in CSS – Photoshop

I have an element that I am using ‘border-right: 2px solid black’ to create dividers between columns.

The design team insists that the ‘right border’ must be rounded on all 4 corners like their mock up where they created a rounded rectangle.

Photoshop mockup example –>
photoshop mockup example

Is there a way to do this on a repeater element in CSS? We would like to use CSS so the elements are responsive.

Here’s what the element looks like together in their design:
enter image description here

Thank you in advance!

Tags:

2

Answers


  1. 0
    1. Create a pseudo-element
    2. Fill background black, 2px wide.
    3. Make border round.
    4. Place it on right.
    Login or Signup to reply.
  2. 0

    Use elements to work as borders, in grid layout. Flex would be better in 1D, but it didn’t came to mind at first.

    .container{
   height:100px;
   width:95%;
   display:grid;
   grid-template-columns: 1fr 3px 1fr 3px 1fr;
   justify-content:center;
   align-items:center;
   background-color: #722020;
   color:#E3C5B8;
   font-family: cursive;
   font-size:20px;
   font-weight:bold;
   text-transform:uppercase;
   margin:30px auto;
}

.container>div{
  text-align:center;
}
.border{
  height:70%;
  background-color:black;
  border-radius:2px;
}
    <body>
  <div class="container">
    <div>Crispiest <br>crust</div>
    <div class="border"></div>
    <div>Certified<br> Safe</div>
    <div class="border"></div>
    <div>Extreme <br>Durability</div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search