Learn how to apply color, font, and border styling to Power Apps canvas controls — including dynamic styles that respond to data and user actions. This hands-on lesson takes you from plain default controls to polished, professional-looking business apps.
You've built a canvas app that works. The buttons click, the form submits, the data appears on screen. But when you show it to your manager or a colleague, something feels off — it looks like a rough draft rather than a real business tool. The labels are plain black text on a white background, the buttons are default blue rectangles, and nothing quite feels like it belongs together. The app functions, but it doesn't inspire confidence.
Here's the thing: visual formatting isn't just cosmetic vanity. In a business tool, good visual design communicates hierarchy, signals interactivity, and reduces cognitive load for the people who use the app every day. A well-styled button tells users "click me." A red-bordered input field tells them "this needs attention." Color, font, and border properties are the vocabulary you use to have that conversation with your users without writing a single word.
By the end of this lesson, you'll know how to apply color, font, and border formatting to canvas app controls confidently — using both the properties panel and Power Fx formulas — and you'll understand why each property works the way it does, so you can make deliberate design decisions rather than just clicking around hoping something looks right.
What you'll learn:
Fill, Color, BorderColor, BorderStyle, and BorderThickness propertiesFont, FontWeight, Size, and Align propertiesYou should have a basic working knowledge of canvas apps before diving in here. If you've never created one, start with Build Your First Canvas App in Power Apps to get oriented. It also helps if you've spent a little time inserting controls and navigating the Power Apps Studio interface. If you want to follow along with a data entry scenario, check out Your First Power App: Build a Data Entry Form in 30 Minutes for context on how forms are structured.
Before you start clicking things, it's worth understanding how the Power Apps styling system actually works under the hood — because this will save you a lot of confusion later.
Every control in a canvas app — a button, a label, a text input, a gallery — exposes a list of properties. Some properties control behavior (OnSelect, Items, Default). Others control appearance. The appearance properties you'll use most often fall into three families:
Fill, Color, BorderColor, HoverFill, PressedFill, etc.Font, FontWeight, Size, Align, VerticalAlign, Italic, UnderlineBorderStyle, BorderThickness, BorderColor, RadiusTopLeft, RadiusTopRight, etc.Every one of these properties accepts a Power Fx formula, which means they can be static values (like a fixed color) or dynamic expressions (like "turn red if the value is negative"). This is what makes Power Apps styling so powerful compared to traditional form builders.
Key insight
In Power Apps, there's no separate "design mode" and "formula mode." A property like Fill accepts a formula just like OnSelect does. This means your styling and your logic live in the same system, and you can make them respond to each other.
You set properties in one of two ways:
For simple static colors, the properties panel is faster. For anything dynamic — colors that change based on conditions, fonts that respond to user state — you'll use the formula bar.
Colors in Power Apps aren't just hex strings. They're a specific data type called Color, and Power Apps provides two main ways to express them:
1. Named colors — Power Apps includes the full set of HTML named colors, accessible via the Color namespace:
Color.Blue
Color.Tomato
Color.SlateGray
Color.White
Color.Transparent
2. The RGBA() function — This gives you precise control over red, green, blue, and alpha (opacity) channels:
RGBA(0, 120, 212, 1) // Microsoft blue, fully opaque
RGBA(0, 120, 212, 0.15) // Microsoft blue, 15% opacity (subtle tint)
RGBA(255, 0, 0, 1) // Pure red
The RGBA values run from 0 to 255 for each color channel, and 0 to 1 for the alpha (transparency) channel. RGBA(0, 0, 0, 1) is solid black; RGBA(0, 0, 0, 0) is fully transparent.
Tip
Use RGBA() when you want precise brand colors from your company's style guide. Most corporate style guides publish colors as hex codes (like #0078D4). To convert, split the hex into pairs: 00, 78, D4 → convert each from hex to decimal → 0, 120, 212. That's your RGBA.
For most controls, Fill controls the background color and Color controls the text/foreground color. Select a Button control and look at the formula bar:
Fill to RGBA(0, 120, 212, 1) for a Microsoft-blue backgroundColor to Color.White for white text on topFor a Label control, Fill is the background and Color is the text color. For a TextInput control, Fill is the input field background.
Buttons and other interactive controls have state-dependent color properties. These automatically apply when the user interacts with the control:
| Property | When it applies |
|---|---|
Fill |
Default / idle state |
HoverFill |
When the user's mouse hovers over the control |
PressedFill |
While the button is being clicked |
FocusedBorderColor |
When the control receives keyboard focus |
A common beginner mistake is setting Fill to your brand color but leaving HoverFill as the default, so the button snaps back to default blue on hover. Always set all three for a polished result:
// On a Submit button
Fill: RGBA(0, 120, 212, 1)
HoverFill: RGBA(0, 100, 180, 1) // slightly darker on hover
PressedFill: RGBA(0, 80, 150, 1) // even darker when pressed
Color: Color.White
HoverColor: Color.White
PressedColor: Color.White
Warning
Don't set HoverFill to Transparent unless you explicitly want the background to disappear on hover. It's a surprisingly easy mistake that makes buttons look broken during interaction.
Typography — the choice and arrangement of text — does more communication work than most beginners realize. A label in 12pt gray text reads like a caption. The same label in 20pt bold dark text reads like a title. The font properties in Power Apps give you full control over this.
The Font property controls the typeface. Power Apps provides a curated set of fonts available across all platforms:
Font.'Open Sans'
Font.Segoe UI // the Windows/Office standard
Font.'Lato'
Font.'Georgia'
Font.'Courier New' // monospace, good for code or IDs
Access these by selecting the Font property in the formula bar and typing Font. — IntelliSense will show the available options. For business apps, sticking with Font.'Open Sans' or Font.'Segoe UI' keeps things professional and readable.
FontWeight controls how heavy (thick) the text strokes are:
FontWeight.Bold // heavy weight, draws the eye
FontWeight.Semibold // slightly lighter, good for subheadings
FontWeight.Normal // standard reading weight
FontWeight.Lighter // delicate, use sparingly
Size is simply a number representing the point size of the text:
Size: 24 // Large heading
Size: 16 // Subheading or emphasized label
Size: 13 // Standard body text
Size: 11 // Caption or fine print
Italic and Underline are boolean properties — set them to true or false:
Italic: true
Underline: false
Align controls horizontal text alignment:
Align.Left // default for most text
Align.Center // good for button labels and headings
Align.Right // useful for numbers in a table
VerticalAlign controls vertical positioning within the control's bounding box:
VerticalAlign.Top
VerticalAlign.Middle
VerticalAlign.Bottom
Tip
When you have a Label that spans the full width of a form header, set Align to Align.Center and VerticalAlign to VerticalAlign.Middle — then size the control's height generously. This makes headers feel intentional and balanced rather than accidentally placed.
A realistic example: styling a form section header label for an employee onboarding app:
Text: "Personal Information"
Font: Font.'Open Sans'
FontWeight: FontWeight.Semibold
Size: 16
Color: RGBA(50, 50, 50, 1)
Fill: RGBA(245, 245, 245, 1)
Align: Align.Left
PaddingLeft: 16
Borders serve two purposes in UI design: they separate elements visually, and they define the edges of interactive controls like text inputs. Getting borders right is what separates an app that looks hand-crafted from one that looks accidental.
BorderStyle determines whether a border is drawn at all, and if so, what pattern it uses:
BorderStyle.Solid // clean, continuous line
BorderStyle.Dashed // dashed line, good for placeholder areas
BorderStyle.Dotted // dotted line, more subtle than dashed
BorderStyle.None // no border drawn
For text inputs, BorderStyle.Solid is almost always the right choice — it makes the input field clearly legible as an interactive area.
BorderThickness is a number representing pixels:
BorderThickness: 1 // subtle, clean
BorderThickness: 2 // slightly more prominent
BorderThickness: 4 // bold, emphasizes the control
A common pattern: use BorderThickness: 1 for idle inputs and BorderThickness: 2 for the focused state, to give a clear signal when the user has clicked into a field.
This is a color value just like Fill and Color:
BorderColor: RGBA(200, 200, 200, 1) // neutral gray, unobtrusive
BorderColor: RGBA(0, 120, 212, 1) // blue, matches brand
BorderColor: Color.Red // error state
Technically these aren't "border" properties in the strict sense, but they're closely related because they shape the control's visual boundary. The four radius properties control how rounded each corner is:
RadiusTopLeft: 4
RadiusTopRight: 4
RadiusBottomLeft: 4
RadiusBottomRight: 4
Setting all four to 4 gives a subtly rounded rectangle — the modern, friendly look used throughout Microsoft 365. Setting them to 0 gives sharp corners — more formal, more structured. Setting them to something like 20 gives pill-shaped buttons. There's no right answer; it's a design choice, but be consistent across your app.
Note
You can't currently set a single "border radius" that applies to all four corners simultaneously — you have to set each corner individually. If you find yourself repeating this for every button in your app, that's a sign you should look into Power Apps Components: Build Reusable UI Elements for Enterprise Scale to avoid the repetition.
This is where canvas app styling moves beyond static decoration into genuinely intelligent UI. Because every property accepts a formula, you can make a control's appearance respond to its own value, to data from a source, or to what the user is doing.
Imagine a label in an inventory tracking app that shows current stock levels. You want it to be green when stock is healthy, amber when it's low, and red when it's critically low:
// Color property of a stock level label
If(
ThisItem.StockQuantity >= 50, RGBA(16, 124, 16, 1), // green
ThisItem.StockQuantity >= 10, RGBA(200, 130, 0, 1), // amber
RGBA(200, 0, 0, 1) // red
)
No code, no event handlers — just a formula on the Color property. The label updates automatically whenever the data changes.
Key insight
Power Apps evaluates property formulas reactively. This means you don't need to "trigger" a style update — whenever any value referenced in the formula changes, the visual automatically recalculates. This is fundamentally different from how JavaScript-based styling works.
For a data entry form, you might want to highlight a TextInput with a red border when the field is empty and the user has attempted to submit:
// BorderColor property of a required TextInput
If(
varSubmitAttempted And IsBlank(TextInput_EmployeeName.Text),
Color.Red,
RGBA(200, 200, 200, 1)
)
Here varSubmitAttempted is a variable you set to true when the submit button is pressed. Combined with Power Apps Data Validation: Using If, IsBlank, and IsMatch to Prevent Bad Data in Forms, this pattern creates a fully interactive validation experience.
Disable a submit button (and style it accordingly) when the form is incomplete:
// On the Submit button
DisplayMode: If(IsBlank(TextInput_Name.Text) Or IsBlank(TextInput_Email.Text), DisplayMode.Disabled, DisplayMode.Edit)
// DisabledFill property
DisabledFill: RGBA(200, 200, 200, 1) // gray when disabled
DisabledColor: RGBA(150, 150, 150, 1) // muted text
Applying styles one control at a time gets tedious fast — and inconsistent. Here are three approaches that scale.
Right-click any control in Power Apps Studio and you'll see options to Copy and Paste. When you paste a control, it brings its formatting with it. This is the quickest way to stamp a consistent style across multiple similar controls: style one button perfectly, then paste it and edit only the text.
Power Apps doesn't have a true global theme system (yet), but you can approximate one using named formulas in your App object. Click the App object in the tree view on the left, then set its Formulas property (this feature may be listed as "Named formulas" in your version):
AppPrimaryColor = RGBA(0, 120, 212, 1);
AppSecondaryColor = RGBA(50, 50, 50, 1);
AppDangerColor = RGBA(200, 0, 0, 1);
AppSuccessColor = RGBA(16, 124, 16, 1);
AppBorderColor = RGBA(200, 200, 200, 1);
AppFontSize = 13;
AppHeadingSize = 18;
Now, instead of hardcoding RGBA(0, 120, 212, 1) in dozens of Fill properties, you write AppPrimaryColor. If your brand color changes, you update it in one place and every control updates automatically. This is a lightweight but powerful pattern for small-to-medium apps.
Tip
For teams building multiple apps or enterprise-grade consistency, the proper solution is Power Apps Design Patterns: Responsive Layouts and Themes, which covers theme management in depth.
If you're building several apps or working in a team, the most sustainable approach is to create a component library — reusable styled controls (buttons, input fields, headers) that can be shared across apps. This is a more advanced topic, but it's worth knowing it exists as your skills grow.
Let's put everything together. You'll style a simple employee lookup card — a realistic scenario you'd encounter in an HR or operations app.
Setup: Create a new screen and add the following controls:
Step 1 — Style the card background rectangle:
Fill: RGBA(255, 255, 255, 1) (white card)BorderStyle: BorderStyle.SolidBorderColor: RGBA(220, 220, 220, 1)BorderThickness: 1RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, RadiusBottomRight: all set to 8Step 2 — Style the employee name label:
Text: "Sarah Chen"Font: Font.'Open Sans'FontWeight: FontWeight.BoldSize: 18Color: RGBA(30, 30, 30, 1)Fill: Color.TransparentStep 3 — Style the department label:
Text: "Operations"Size: 13FontWeight: FontWeight.NormalColor: RGBA(100, 100, 100, 1)Fill: Color.TransparentStep 4 — Style the status label with dynamic color:
Text: "Active"Size: 12FontWeight: FontWeight.SemiboldColor: If(Self.Text = "Active", RGBA(16, 124, 16, 1), RGBA(200, 0, 0, 1))Fill: Color.TransparentNote
Self is a special keyword that refers to the control itself. Self.Text lets the color formula read the same text value that the label is displaying, without having to repeat the label's name. This keeps the formula self-contained.
Step 5 — Style the Edit button:
Text: "Edit Record"Fill: RGBA(0, 120, 212, 1)HoverFill: RGBA(0, 100, 180, 1)PressedFill: RGBA(0, 80, 150, 1)Color: Color.WhiteHoverColor: Color.WhitePressedColor: Color.WhiteBorderStyle: BorderStyle.NoneRadiusTopLeft, RadiusTopRight, RadiusBottomLeft, RadiusBottomRight: all set to 4You should now have a clean, card-style layout with a styled name, subdued department text, a status label that dynamically turns green or red, and a properly styled button with hover and pressed states.
Mistake: Forgetting to style hover and pressed states
You set a beautiful Fill color on your button, but when you hold the mouse down it flashes back to default blue. Fix: always set HoverFill, PressedFill, HoverColor, and PressedColor to match.
Mistake: Using Color.Transparent for Fill on a shape control
Transparent fill on a Rectangle or other shape control means clicks pass through it. If you want a see-through background but need the control to intercept touch/clicks, use RGBA(255, 255, 255, 0.01) — technically not fully transparent, but visually indistinguishable from it.
Mistake: Hardcoding the same RGBA value in dozens of places
If you type RGBA(0, 120, 212, 1) into fifty controls and your brand color changes, you're in for an afternoon of tedious clicking. Use named formulas in the App object or extract shared values to a table as early as possible.
Mistake: Styling controls independently when they should behave as a group
When controls share a visual relationship (like a label and its input), they should share style decisions. If your inputs have BorderColor: RGBA(200, 200, 200, 1) but your labels use Color: RGBA(100, 100, 100, 1), make sure those grays feel harmonious — test them together, not in isolation. For structured layout control that makes grouping easier, see Understanding Power Apps Screens, Containers, and Layout Controls: Building Your First Structured App Interface.
Mistake: Forgetting that DisplayMode affects which color properties apply
When a control is in Disabled mode, the Fill and Color properties are ignored — only DisabledFill and DisabledColor apply. Make sure you've styled the disabled state explicitly for any control that might be disabled.
Warning
If your dynamic color formula references a data source field (like ThisItem.Status), and the field value is blank or missing, your If() condition may not behave as expected. Always account for the blank case with an Else branch in your formula, or use IsBlank() to guard against it.
You've learned how to work with the full set of visual formatting properties in Power Apps canvas apps:
Fill, Color, BorderColor, plus hover and pressed variants) control every surface and foreground color in your appFont, FontWeight, Size, Align, Italic, Underline) control how text reads and communicates hierarchyBorderStyle, BorderThickness, BorderColor, corner radii) define the edges and shape of your controlsThe most important shift in thinking is this: styling isn't a final polish step you apply after the app works. The best canvas app builders design and logic simultaneously, because the visual output is part of the user experience.
From here, there are a few natural next steps. If you want to understand how to build a consistent visual system across a whole app — not just individual controls — Power Apps Design Patterns: Responsive Layouts and Themes goes deep on that. If you're building forms and want to combine your new styling skills with proper validation logic, Power Apps Data Validation: Using If, IsBlank, and IsMatch to Prevent Bad Data in Forms is the right companion. And if you're starting to feel the pain of repeating the same styles across controls in a larger app, Power Apps Components: Build Reusable UI Elements for Enterprise Scale will show you how to build once and reuse everywhere.
Your app is functional. Now make it excellent.