This styling page is for more granular edits of the iframe. For more general editing of the iframe and control of the embedded content, please refer to the Previewing and Editing section of our AR Web Embed documentation.
The iframe component can be styled with standard CSS attributes such as
color and more.
The general structure to include CSS styling into an iframe code is to add the
style attribute and then add in your properties and values:
style="background-color: blue; border: 2px dashed green;"
Pay close attention to where the semi-colon (
;) and quotation marks (
"") are placed. Misplacing these are the most common reason for it not to work.
Below is a table with a list of tested CSS properties you can change. If you are unfamiliar with CSS, click here to learn more.
|Background Color||Changes the background color of the iframe container. This can be literal color name, hexadecimal, or RGBA values.|
|Border||The shorthand value to change the properties of the iframe container border; which are
|Border radius||Changes the border roundness of the iframe container's corners. Values can be changed individually for each corner, all at once or as pairs.|
|Frameborder||Controls if there is a border or not. A
|Height||Changes the overall height of the iframe container, not the content. You can use px, rem, and % for the value.|
|Width||Changes the overall width of the iframe container, not the content. You can use px, rem, and % for the value.|
If you use the
styleattribute to add a border, it will override the
frameborderattribute. Also note that some website builders might have internal settings or properties that can override some of these iframe properties.