practice css_outlinee2

<!DOCTYPE html>
<html>
<body> 
  
<div style="width:500px; margin:auto;">
  
<div style="outline:4px dotted gray; border:2px solid red; font-size:18px;"><b>outline-style:dotted;</b> dotted value defines outline that consists of doots.</div>
<br><br>
  
<div style="outline:4px dashed gray; border:2px solid red; font-size:18px;"><b>outline-style:dashed;</b> dashed value represents outline that is collection of dashes.</div>
<br><br>
  
<div style="outline:8px solid gray; border:2px solid red; font-size:18px;"><b>outline-style:solid;</b> solid value defines a solid outline.</div>
<br><br>
  
<div style="outline:8px double gray; border:2px solid red; font-size:18px;"><b>outline-style:double;</b> double defines double outline outside the border.</div>
<br><br>
  
<div style="outline:8px groove gray; border:2px solid red; font-size:18px;"><b>outline-style:groove;</b> It looks as if the content is coming into the canvas for the groove property.</div>
<br><br>
  
<div style="outline:8px ridge gray; border:2px solid red; font-size:18px;"><b>outline-style:ridge;</b> It looks as if the content is coming out of the canvas.</div>
<br><br>
  
<div style="outline:8px inset gray; border:2px solid red; font-size:18px;"><b>outline-style:inset</b> inset styles a box in such a way that the colors of outline-top and outline-left are darker than the other outline sides.</div><br><br>
  
<div style="outline:8px outset gray; border:2px solid red; font-size:18px;"><b>outline-style:outset;</b> outset styles a box in such a way that the colors of outline-bottom and outline-right are darker than the other outline sides.</div>
<br><br>
  
</div> 
</body>
</html>

Share