-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Position
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Outline
Outlines play a vital role in web design, often highlighting focus or providing visual cues without affecting layout. In CSS, outline properties offer granular control over the appearance and positioning of element outlines.
Outlines are lines that appear around elements but don’t take up space or affect layout. They’re similar to borders but are mainly used for styling and accessibility purposes, especially to indicate a focus on interactive elements.
Outline-width: Specifies the thickness of the outline.
The width can be defined using specific measurements
Specific Measurements: px, em, rem, etc.
For example : 1px, 2em, 0.5rem
Predefined Keywords: thin, medium, thick
- Example 1
- Example 2
Outline-style: Defines the style of the outline.
There are common values are as follows:
-none: No outline.
-solid: A single line.
-dotted: A series of round dots.
-dashed: A series of short line segments.
-double: Two parallel solid lines.
-groove: 3D effect that looks carved.
-ridge: Opposite of groove, 3D effect looking raised.
-inset: Makes the box look embedded.
-outset: Opposite of inset, making the box appear raised.
- Example 1
- Example 2
Outline-color: Specifies the color of the outline.You can use any valid color value, like
Color Names: red, blue, green, etc.
Hexadecimal: #FF0000, #00FF00, #0000FF
RGB: rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)
RGBA: rgba(255,0,0,0.5), rgba(0,255,0,0.5), rgba(0,0,255,0.5)
- Example 1
- Example 2
Shorthand outline Property: Allows you to set the width, style, and color of the outline in one declaration.
The typical order is outline-width, outline-style, and outline-color.
- Example 1
- Example 2
Course Video
YouTube Reference :
1) CSS Outline in Hindi/Urdu
