Template:Round rect

The following documentation is located at Template:Round rect/doc. [<Edit> Template:Round rect/doc]
[⧼Purge⧽ Template:Round rect]

The {{round rect}} or {{rounded corners rectangle}} graphic template is used to draw a rectangle with rounded corners. To get a "bona fide" rectangle, use the {{rect}} or {{rectangle}} graphic template. To get a square with rounded corners, use {{round square}} or {{rounded corners square}}. To get a "bona fide" square, use {{square}}.

Usage

{{round rect
| width   = ''width''
| height  = ''height''
| stroke width = ''stroke width''
| units   = ''units'' 
| stroke  = ''stroke''
| fill    = ''fill''
| border-radius = ''tl-hr tr-hr br-hr bl-hr'' / ''tl-vr tr-vr br-vr bl-vr''   
| content = ''content''
}}

or

{{round rect
| width   = ''width''
| height  = ''height''
| stroke width = ''stroke width''
| units   = ''units'' 
| stroke  = ''stroke''
| fill    = ''fill''
| border-radius = ''tl-r tr-r br-r bl-r''   
| content = ''content''
}}

or

{{round rect
| width   = ''width''
| height  = ''height''
| units   = ''units'' 
| stroke width = ''stroke width''
| stroke  = ''stroke''
| fill    = ''fill''
| border-radius = ''r''   
| content = ''content''
}}

or (to get a rounded corners square)

{{round square
| side   = ''side''
| units   = ''units'' 
| stroke width = ''stroke width''
| stroke  = ''stroke''
| fill    = ''fill''
| border-radius = ''r''   
| content = ''content''
}}

or (to get a "bona fide" rectangle)

{{rectangle
| width   = ''width''
| height  = ''height''
| units   = ''units'' 
| stroke width = ''stroke width''
| stroke  = ''stroke''
| fill    = ''fill''
| content = ''content''
}}

or (to get a "bona fide" square)

{{square
| side   = ''side''
| units   = ''units'' 
| stroke width = ''stroke width''
| stroke  = ''stroke''
| fill    = ''fill''
| content = ''content''
}}

where

• width is the width of the rounded corners rectangle or rectangle (side then 250 as default, i.e. 250px with default units);
• height is the height of the rounded corners rectangle or rectangle (width then side then 250 as default, i.e. 250px with default units);
• side is the side length of the rounded corners square or square (250 as default, i.e. 250px with default units);
• stroke width is the stroke width (1 as default, i.e. 1px with default units);
• units are the units used with width, height and stroke width (px as default);
• stroke is used to override the default stroke style, excluding the stroke width (solid black, i.e.     );
• fill is used to override the default fill style, i.e. transparent;
• border-radius are the border (nonnegative) radii tl-hr tr-hr br-hr bl-hr / tl-vr tr-vr br-vr bl-vr (i.e. top-left horizontal radius, top-right horizontal radius, bottom-right horizontal radius, bottom-left horizontal radius, then optionally / (slash) followed by the corresponding vertical radii, if different from their horizontal radii).
• content is optional content, e.g. text, to show at the center of the rounded corners rectangle.

and where the center of the rounded corner rectangle is at (0, 0), the origin of the canvas, which is at the bottom left corner. To change the location, use the {{translate}} template, but before you do so, you may want to use {{scale}}, {{rotate}} or {{skew}} first, since the default origin used by those templates is at (0, 0), the bottom left of the canvas.

Examples

Note: with Firefox 22.0, the supported stroke styles for [the rounded portions of] the rounded corners seems to be only solid or none, although for the straight portions of the stroke, the dashed and dotted styles are also supported! (For the {{ellipse}} and {{circle}} templates, where we have nothing but rounded portions, the supported stroke styles also seem to be only solid or none.)

Note: you can see that the strokes are drawn on the outside of the bounding boxes.

Code		Result
{{canvas| width = 500 | height = 500 | float = right |<!-- -->{{square | side = 50 | stroke width = 5 | units = px | stroke = solid gold | fill = rgba(0, 0, 255, 0.25) | content = At{{nl}} (0, 0). }}<!-- -->{{translate|<!-- -->{{rectangle | width = 350 | height = 250 | stroke width = 5 | units = px | stroke = solid gold | fill = white }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{round square | side = 150 | stroke width = 2 | units = px | stroke = dotted purple | fill = gold | border-radius = 20% | content = I have been rotated, then translated! }}<!-- -->| angle = 45 | angle unit = deg }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{round rect | width = 150 | height = 250 | stroke width = 4 | units = px | stroke = dashed black | fill = rgba(0, 255, 0, 0.5) | border-radius = 10px 20px 30px 40px | content = I'm green, {{nl}} with corners of different radii, although vertical radii always equal horizontal radii. }}<!-- -->| 425, 375 }}<!-- -->{{translate|<!-- -->{{round rect | width = 250 | height = 150 | stroke width = 4 | units = px | stroke = solid rgba(0, 0, 0, 0.25) | fill = rgba(255, 0, 0, 0.5) | border-radius = 10% 20% 30% 40% / 40% 30% 20% 10% | content = I'm red, {{nl}} look at my weird corners, where vertical radii differ from horizontal radii! }}<!-- -->| 125, 75 }}<!-- -->{{translate|<!-- -->{{round rect | width = 120 | height = 60 | stroke width = 2 | units = px | stroke = solid rgba(0, 0, 0, 0.5) | fill = rgba(255, 127, 0, 0.25) | border-radius = 50% 50% 0 0 / 100% 100% 0 0 | content = I'm beige,{{nl}} a half circle. }}<!-- -->| 85, 445 }}<!-- -->{{translate|<!-- -->{{round rect | width = 100 | height = 100 | stroke width = 2 | units = px | stroke = solid purple | fill = cyan | border-radius = 0 0 100% 0 | content = A quarter{{nl}}circle. }}<!-- -->| 440, 60 }} }}		At (0, 0). I have been rotated, then translated! I'm green, with corners of different radii, although vertical radii always equal horizontal radii. I'm red, look at my weird corners, where vertical radii differ from horizontal radii! I'm beige, a half circle. A quarter circle.

Code

<noinclude>{{Documentation}}</noinclude><includeonly><!--

Usage: 

{{round rect
| width = ''width''
| height = ''height''
| stroke width = ''stroke width''
| units = ''units'' 
| stroke = ''stroke''
| fill = ''fill''
| border-radius = ''tl-hr tr-hr br-hr bl-hr'' / ''tl-vr tr-vr br-vr bl-vr''   
| content = ''content''
}}

where the center of the rounded corner rectangle is at (0, 0), the origin of the canvas, which is at the bottom left corner. To change the location, use the {{translate}} template, but before you do so, you may want to use {{scale}}, {{rotate}} or {{skew}} first, since the default origin used by those templates is at (0, 0), the bottom left of the canvas.   

--><!-- 

Note: Webkit only allows the transform of block elements, not inline elements. Using 

  display: inline-block;

in the style of an inline element, like <span>...</span>, makes it a block element, although inline.
 
--><span style="display: inline-block; position: absolute;
left: {{#expr: - ( ( {{#if: {{{width|{{{side|{{{2|}}}}}}}}} | {{{width|{{{side|{{{2}}}}}}}}} | 250 }} ) / 2 )  
               - ( {{#if: {{{stroke width|}}} | {{{stroke width}}} | 1 }} ) 
      }}{{{units|px}}};
bottom: {{#expr: - ( ( {{#if: {{{height|{{{width|{{{side|{{{3|}}}}}}}}}}}} | {{{height|{{{width|{{{side|{{{3}}}}}}}}}}}} | 250 }} ) / 2 )     
                 - ( {{#if: {{{stroke width|}}} | {{{stroke width}}} | 1 }} )  
        }}{{{units|px}}};
width: {{#if: {{{width|{{{side|{{{2|}}}}}}}}} | {{#expr: {{{width|{{{side|{{{2}}}}}}}}} }} | 250 }}{{{units|px}}}; 
height: {{#if: {{{height|{{{width|{{{side|{{{3|}}}}}}}}}}}} | {{#expr: {{{height|{{{width|{{{side|{{{3}}}}}}}}}}}} }} | 250 }}{{{units|px}}}; 
background: {{#if: {{{fill|}}} | {{{fill}}} | transparent }}; 
border: {{#if: {{{stroke width|}}} | {{{stroke width}}} | 1 }}{{{units|px}}} {{#if: {{{stroke|}}} | {{{stroke}}} | solid black }};
border-radius: {{#if: {{{border-radius|}}} | {{{border-radius}}} | 0% }};"><!--

-->{{#if: {{{content|}}} 
   | <table style="background: none; border: none; width: 100%; height: 100%; text-align: center; vertical-align: middle;"><tr><td><!--
     -->{{{content}}}<!--
  --></td></tr></table>
   |
   }}<!--

--></span></includeonly>

See also

Drawing templates

• {{Canvas}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

Affine transforms templates

See Help:CSS Transforms.

• {{Origin}}

• {{Translate}} and {{transform-translate}}
• {{Flip}}
• {{Scale}} and {{transform-scale}}

• {{Rotate}} and {{transform-rotate}}
• {{SkewX}}
• {{SkewY}}
• {{Skew}} and {{transform-skew}}

• {{Affine}} ({{affine matrix}})