OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Outline

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear

Outline

PREVIOUS NEXT

In this tutorial, I will be showing you all you need to know about outline and how to format it the way you desire.

definition
DEFINITION:

Outline is the line outside the border of an element.

Outline Properties

OUTLINE STYLE

The outline-style property is used to set the style of the outline. Its values include:

  • dotted
  • dashed
  • solid
  • double
  • groove - 3D grooved outline
  • ridge - 3D ridge outline
  • inset - 3D inset outline
  • outset - 3D outset outline
  • none - no outline
  • hidden - not visible (cannot be seen)
TRY IT OUT YOURSELF

OUTLINE WIDTH

The outline-width property is used to set the thickness or thinness (weight) of the outline.

TRY IT OUT YOURSELF

OUTLINE COLOR

The outline-color property is used to specify the color of the outline-style value.

TRY IT OUT YOURSELF
note
NOTE:

outline-style must be declared first before declaring outline-width and outline-color else your border effect will not be visible.


Outline (Shorthand)

OUTLINE OFFSET

The outline-offset property is used to specify the space between the outline and the border of the element.

TRY IT OUT YOURSELF
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT