Question 1

What is the difference between px and % for border-radius?

Accepted Answer

px gives a fixed corner size regardless of element dimensions. % is relative to the element's width and height — 50% on a square element always produces a perfect circle and scales automatically as the element resizes.

Question 2

How do I make a perfect circle with CSS?

Accepted Answer

Set border-radius: 50% on an element with equal width and height. Example: width: 80px; height: 80px; border-radius: 50%;

Question 3

How do I round only two corners?

Accepted Answer

Use the four-value shorthand and set the other corners to 0. For tab shape: border-radius: 12px 12px 0 0. For left panel: border-radius: 12px 0 0 12px.

Question 4

What is the pill or capsule shape in CSS?

Accepted Answer

Use a very large px value such as 999px. Browsers cap the radius at half the element's shortest dimension so an excessively large value always produces fully rounded ends.

Question 5

Does border-radius clip child elements?

Accepted Answer

Not automatically. Add overflow: hidden to the parent container to force children to respect the rounded corners.

Question 6

How do I create an organic blob shape with CSS?

Accepted Answer

Use the elliptical / syntax with different values for each corner. Example: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Combine with a CSS animation for a fluid morphing effect.

Question 7

Can I use border-radius with border-image?

Accepted Answer

No — border-image overrides standard border rendering which overrides border-radius. Use the background gradient technique for gradient borders with rounded corners instead.

Question 8

Is border-radius affected by box-sizing?

Accepted Answer

No. border-radius always applies to the outer edge of the border box regardless of box-sizing value.

Gerador CSS Border Radius

Notações

Perguntas Frequentes