Tillitsdone
down 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.
thumbnail

Syntax

The outline-width property in CSS sets the thickness of an element’s outline. Here’s the basic syntax:

outline-width: medium | thin | thick | length | initial | inherit;

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: Typically 1px.
  • medium: Default, usually 3px.
  • thick: Typically 5px.

Length Values

  • <length>: Any CSS length unit like px or em.

Global Values

  • initial: Resets to medium.
  • inherit: Inherits from the parent.

Example

Here’s how to use outline-width:

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* Length values */
outline-width: 1px;
outline-width: 0.1em;
/* Global values */
outline-width: inherit;
outline-width: initial;

Here’s how different outline-width values look:

/* Keyword values */
.thin-outline {
outline-width: thin;
}
.medium-outline {
outline-width: medium;
}
.thick-outline {
outline-width: thick;
}
/* Length values */
.two-px-outline {
outline-width: 2px;
}
.one-em-outline {
outline-width: 1em;
}
/* Global values */
.initial-outline {
outline-width: initial;
}
.inherit-outline {
outline-width: inherit;
}

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:

/* Example using outline-style, outline-color, and outline-width */
.element {
outline-style: dashed;
outline-width: 2px;
outline-color: blue;
}
/* Example using outline shorthand */
.element {
outline: 2px solid blue;
}

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.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
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.
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.