We are trying to turn off paper input container style so that we can have all around border for input box and no animation on focus.

In custom polymer component, we were able to get what we want by disable the following mixin in custom polymer component style section:

--paper-input-container-underline

--paper-input-container-underline-focused

However, when copying the same style section out onto html and use paper-input-container, it is not taking. Is there a way to apply these mixin outside of custom polymer component? I am guessing my css syntax is wrong.

First, CSS mixins and properties from index.html are only applied in Polymer when they're in custom-styles:

<style is="custom-style">
...
</style>

Second, your CSS selector needs to be adjusted to target the paper-input-container, as paper-input-container alone won't work. If you want to target only paper-input-containers in x-foo elements, then you'd write: