InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS outline – create outline around an element

on Apr 11, 2016

CSS outline property can be used to create outlines around visual objects such as buttons, active form fields, image maps, etc. It it different from css border. Few points to note about outline

  1. Outlines do not take up space.
  2. Outlines may be non-rectangular.
  3. The outline is drawn just outside border edge.

CSS property outline

CSS version: CSS 2.1
Value: [outline-color || outline-style || outline-width] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Few points to note:

  1. To inherit outline from parent, value inherit can be used. By default outline is not inherited.
  2. We can also separately define outline-width, outline-style and outline-color.
  3. Some commonly used style values are solid, dotted, dashed, etc.

Example – css outline

Note that outline not taking any extra space here (hence overlapping of outlines).

<style type="text/css">
div {width:150px; background-color: lightgray;}
.mybtn {
 outline: 2px solid lightgreen;
}
.myspn {
 outline: 2px solid red;
}
</style>
<button class="mybtn">button value</button>
<div>
  <img src="/img/elephant1_small.jpg">
  <span class=myspn>hello world hello world hello world hello world </span>
</div>
refresh done
try it online

Related

  • CSS outline-color
  • CSS outline-style
  • CSS outline-width

Specification

  • W3C CSS 2.1 outline specification

Suggested posts:

  1. CSS border-style tutorial and examples
  2. CSS outline-style
  3. CSS border – define border properties of an element
  4. CSS outline-color
  5. CSS outline-width
  6. CSS border-width – set element border width of four sides
  7. CSS border-color – define color of four borders
  8. CSS border radius and round corners examples
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress