CSS - Outline Color



 CSS Outline Color

Learn css - css tutorial - CSS Outline Color - css examples - css programs

Outline Color - Definition and Usage

  • In css outline-color property is used to apply the color of the outline of the element.
  • Color values is used to specify the colors to the element, web page etc..
  • It is used to apply the colors in various format: Hexadecimal,RGB,RGBA ,HSL,HSLA
CSS Outline color
  • The outline color property is used in CSS, to choose the color for outline.
  • Outline-color property value should either be a color name, a hex color, or an RGB value.

Sample Code :

 Tryit<!DOCTYPE html>
<html>
    <head></head>
    <body>
          <p style="outline-width: thin; outline-style: solid; outline-color: red">
            Welcome To WikiTechy.com
          </p>
          <br />
          <p style="outline-width: thick; outline-style: dashed; outline-color:#009900">
            Find Solutions For All Technology Errors.
          </p>
          <br />
          <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
            Best E-Learning Website in The World.
          </p>
    </body>
</html>
click below button to copy the code. By - css tutorial - team

Code Explanation :

Code Explanation
  1. In CSS, outline-color: red is used for applying red color for the outline around p tag.
  2. Here, we are Applying hexadecimal color values for outline in outline-color property.
  3. Here, p element was defined for the statement “Best E-Learning Website in the World” where the outline for the statement is applied with RGB Colors values which specify its color values based on the formula (red, green, and blue).

Note :RGB values can also be assigned using hexadecimal color values in the form of: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

Output :

Output
  1. Here red color value is applied for the outline around the text “Welcome To WikiTechy.com”.
  2. The Text “Find Solutions For All Technology Errors” will have a outline in green color outline which is specified in Hexadecimal.
  3. Over here, the RGB color values is applied for the text “Best E-Learning Website in the World.” which will be displayed with blue color outline.

This page provides a detailed information on introduction to css , css sheet , css for html , introduction to html and css , css with html , css style code , html css generator , css4 tutorial , css source , css html javascript , basic css tutorial , html with css example , html css basics , css style sheet example , best css tutorial , basics of css , css home page , html css online editor , css layout tutorial , html and css test.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to css outline color