diff --git a/packages/ui-dialog/src/Dialog/index.tsx b/packages/ui-dialog/src/Dialog/index.tsx
index 74754fddb5..05ebf9bb17 100644
--- a/packages/ui-dialog/src/Dialog/index.tsx
+++ b/packages/ui-dialog/src/Dialog/index.tsx
@@ -23,6 +23,7 @@
  */
 
 import { Component } from 'react'
+import { css } from '@emotion/react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
 import { findDOMNode, requestAnimationFrame } from '@instructure/ui-dom-utils'
@@ -173,7 +174,11 @@ class Dialog extends Component<DialogProps> {
           role === 'dialog' && this.props.shouldContainFocus ? true : undefined
         }
         className={this.props.className} // TODO in V2 remove className, there is no usage of it.
-        style={{ borderRadius: 'inherit' }} // ensure the dialog inherits border radius from View
+        css={css`
+          @layer dialogBase {
+            & { border-radius: inherit; }
+          }
+        `} //making sure it inherits from containers if nothing is specified from outside and use the outside specifiers if they are present, e.g.:modal
         ref={this.getRef}
       >
         {this.props.children}