Styling

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 height, width, border radius, 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.

CSS Property Description
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 color , style, and width. Any number of these values can be specified at once and the order does not matter.
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 frameborder value of 0 is the default and displays no border. Use a value of 1 to turn the border on.
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 style attribute to add a border, it will override the frameborder attribute. Also note that some website builders might have internal settings or properties that can override some of these iframe properties.

zapcode branded_zapcode i