Can I create a round border on only the top right corner?« Back to Questions List


In exportkit we have a CSS shape that we want to make this option:


This means I want to have a shape with just topleft and/or topright radius, how we can do it?

Added November 5, 2015 3:03 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

You can now enable SVG Paths and your shapes will convert to Vectors in the output: //

Answer by admin
Answered On December 16, 2015 4:48 pm #

We are adding support for this, we have a huge vector and complex shape update coming soon to add support all environments. This will solve your border and vector issues.

Solution 1:

Convert to a Smart Object and you can use ${obj} tag: // later when we have full support.

Solution 2:

Create a custom style using ${code} tag or External CSS, eg.

.cornerBorder{ border-top-right-radius:2em }

Then add the custom style to your shape layer, eg.

${css|style:cornerBorder} my shape layer

Solution 3:

This will involve a “trick of the eye”, draw multiple shape layers on top of each to produce the effect, eg. Draw 2 square shapes, and 1 rounded shape for the corner you require.

1. Use multiple LAYERS to do this, do not create a complex shape/vector (support for this is coming soon)

2. Because they are shapes, they do not produces additional assets – so 0% footprint, only divs are used for shapes

Answer by admin
Answered On November 5, 2015 3:09 am #
Looking for another answer? View other questions in CSS or get premium support for guaranteed results.
Asked by hassan68★★★
2 answers
Last Answered 9 years ago by admin


Recent Answers

asked by nmax
asked by shanrt
asked by Ali Sodikin
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.