CSS - CSS Outline Style
Learn css - css tutorial - CSS Outline Style - css examples - css programs
Outline Style - Definition and Usage
- In css outline-style is used to specify the style of an outline.
- Line that is drawn outside the border edge of an element.
- The outline-style property specifies the certain style for the line (solid, dotted and double) that goes around an element.
- There are several types of styles for the outline they are :
- none - Simply no outline
- dotted - Depicts a dotted outline
- dashed - Depicts a dashed outline
- solid - Depicts a solid outline
- double - Depicts a double layer outline(Thick Solid)
- groove - Outline looks like 3d grooved (narrow cut) line.
- ridge - Looks Completely opposite to groove outline.
- inset - Outline looks firmly attached to your webpage.
- outset - Outline look like it is coming out of the lower screen.
- hidden - Invisible outline same as none.
Sample html code - html and css tutorial
Code Explanation - css style
- In CSS, outline–style: solid for an <p> element will display a solid outline around it.
- outline-style: dashed for an element will display a dashed outline around it.
- outline-style: dotted for an element will display an outline in dotted lines
- outline-style: ridge property is used to apply a narrow outline around an element.
- outline-style: groove property is used to display a 3D grooved outline. For better understanding we have used outline-color property.
Note : In order to understand ridge and groove we need to add outline-color which we will learn in next chapter.
Code Output - html stylesheet
- The output of the above example is displayed in the browser window is shown below.
- Here, the paragraph text Welcome To wikitechy.com will have solid outline around it.
- Similarly dashed outline will be displayed around the text Find solutions for technology errors.
- The text Best E-Learning Website in the World. will appear in browser window with dotted outline around it.
- The text Where you can learn technologies easily will have ridged outline (narrow outline) around it.
- Over here, the paragraph Execute the code pragmatically @wikitechy.com will be displayed in the browser window with 3d grooved outline.