Four card feature section

Community feedback

• 

  P

  Carl•1,075

  @CarlHummPosted about 2 months ago

  Hi there

  I see what you're saying about the border. It curls around the radius of the card corners, whereas on the design it is straight and cropped.

  To achieve this effect, instead of using a border, you could also use a pseudo element using ::before or ::after.

  This could look like the following.

  
  .c-card {
  overflow: hidden; 
  }
  
  .c-card::before { 
  content:""; 
  position:absolute;
  inset-inline-start: 0; 
  inset-block-start: 0;
  width: 100%;
  height:4px;
  display:block;
  }
  
  .c-card--red::before { 
  background-color: red
  }
  
  

  This is just one method you could do.

  Hope this helped and good luck!

  0
• 

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  Hi @1wilber,

  Great work on your project! 😊

  Just a small suggestion – if you're looking to manage border radii effectively, you can use specific properties like border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, or border-top-left-radius. This approach will give you more control over individual corners, allowing you to easily remove or add borders as needed. Here's an example:

  .element {
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  

  This method should help make your styling more flexible and manageable. 👍

  Keep up the good work! 💪

  0