Corner Radius (Design Term):
“Corner radius” refers to the rounded curvature at the junction of two surfaces or edges. In traditional design disciplines such as industrial or graphic design, it’s a physical or visual descriptor used to soften corners.
Border-Radius (CSS Property):
In web development, border-radius is the CSS property used to apply this visual rounding effect to HTML elements such as div, img, or button. It is the technical tool that implements the concept of a corner radius within digital layouts.
Relationship Between the Two:
The concept of “corner radius” exists in many design contexts, but on the web, it’s brought to life using the border-radius property. Thus, border-radius is the CSS expression of a corner radius.
Value Syntax in CSS:
The border-radius property accepts one to four values:
border-radius: 10px;– all cornersborder-radius: 10px 20px;– top-left/bottom-right and top-right/bottom-leftborder-radius: 10px 20px 30px;– top-left, top-right/bottom-left, bottom-rightborder-radius: 10px 20px 30px 40px;– top-left, top-right, bottom-right, bottom-left
CSS3 Limitation in NetSuite PDF Templates:
The border-radius property is a CSS3 feature. However, NetSuite’s Advanced PDF/HTML Templates currently support only CSS2 styling. As such, any use of border-radius in your print templates (e.g., invoices, purchase orders) will not render correctly in the PDF output because CSS3 is not interpreted by the rendering engine.