Scroll to discover
Understanding CSS outline-width for Better Web Designs
Learn how to use the CSS outline-width property to highlight elements.
Discover available options like thin, medium, thick, and length values.
Discover available options like thin, medium, thick, and length values.
Syntax
The outline-width
property in CSS sets the thickness of an element’s outline. Here’s the basic syntax:
Keyword Values
thin
: Sets a thin outline.medium
: Sets a medium outline (default).thick
: Sets a thick outline.
Length Values
<length>
: Uses specific units like pixels (px
) or ems (em
).
Global Values
initial
: Resets to the default value (medium
).inherit
: Inherits from the parent element.
Values
You can use predefined keywords or specific lengths to set the outline width.
Predefined Keyword Values
thin
: Typically1px
.medium
: Default, usually3px
.thick
: Typically5px
.
Length Values
<length>
: Any CSS length unit likepx
orem
.
Global Values
initial
: Resets tomedium
.inherit
: Inherits from the parent.
Example
Here’s how to use outline-width
:
Here’s how different outline-width
values look:
Browser Compatibility
The outline-width
property is widely supported by modern browsers:
- Google Chrome: Supported since version 1.0.
- Microsoft Edge: Supported since version 12.0.
- Mozilla Firefox: Supported since version 1.5.
- Opera: Supported since version 7.0.
- Safari: Supported since version 1.2.
Related Properties
outline-style
: Sets the outline style (e.g.,solid
,dashed
).outline-color
: Sets the outline color.outline-offset
: Sets the space between the outline and the element’s edge.outline
: Shorthand for setting style, width, and color in one go.
Example
Here’s how to use related properties with outline-width
:
By using outline-width
with related properties, you can create customized outlines that enhance the visual appeal and accessibility of your web designs.
Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.