CSS Outline

CSS Outline

The CSS outline properties specify the style, color, and width of an outline.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".



Outline Style

The outline-style property specifies the style of the outline.

The outline-style property can have one of the following values:

   dotted - Defines a dotted outline
   dashed - Defines a dashed outline
   solid - Defines a solid outline
   double - Defines a double outline
   groove - Defines a 3D grooved outline. The effect depends on the outline-color value
   ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
   inset - Defines a 3D inset outline. The effect depends on the outline-color value
   outset - Defines a 3D outset outline. The effect depends on the outline-color value
   none - Defines no outline
   hidden - Defines a hidden outline

The following example first sets a thin black border around each <p> element, then it shows the different outline-style values:

Example
p {
   border: 1px solid black;
   outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}



For any clarifications you can leave your comment below.

Is there any outline or any kind of programming material aside from CSS?

jennielym wrote:
Is there any outline or any kind of programming material aside from CSS?

Yes dear, aside from CSS you can also use a JavaScript to your HTML document.

is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx

Are those the only values allowed for the Outline Property? or it can still read other values which i wanted the outline to look like?

Athena wrote:Are those the only values allowed for the Outline Property? or it can still read other values which i wanted the outline to look like?

What values you should want to use? Can you give me an example?

JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.

Admin wrote:

JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.

ahhhh,, uhmmm why this codes for outline doesn't work maam?
{outline-bottom: 1px solid black}

not just like
{border-bottom: 1px solid black}
is working....

JasonOmeter wrote:

Admin wrote:

JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.

ahhhh,, uhmmm why this codes for outline doesn't work maam?
{outline-bottom: 1px solid black}

not just like
{border-bottom: 1px solid black}
is working....

Because the border-style property can have from one to four values, the top border, right border, bottom border, and the left border while an outline is a line that is drawn around elements outside the borders to make the element "stand out".

Can a value like asterisk be appliead? i mean it can also be a design for outline right? but can it be read as value?

Good Afternoon M'am Kayla,
does the outline have a property of outline radius?

Athena wrote:Can a value like asterisk be appliead? i mean it can also be a design for outline right? but can it be read as value?

Accoring to my research, * (asterisk) is a CSS selector. The * selector selects all elements and can also select all elements inside another element.

JasonOmeter wrote:Good Afternoon M'am Kayla,
does the outline have a property of outline radius?

As far as I know outline don't have a radius property but I guess you should try the border-radius property. With the border-radius property, you can give any element "rounded corners".

What is the difference between css outline and css border?

Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

EzequielGo wrote:What is the difference between css outline and css border?

The CSS border properties allow you to specify the style and color of an element's border while an outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

SarahMae wrote:Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

What is your code in CSS text-shadow?

Difference between CSS outline and border. aside from CSs outline is drawn around outside the borders..

joshuaB wrote:Difference between CSS outline and border. aside from CSs outline is drawn around outside the borders..

In addition to some other answers... here are a few more differences I can think of:

First, border supports rounded corners with the border-radius property and outline doesn't
Second, border has properties to style each side with border-top:, border-left: etc. outline can't do this. There's no outline-top: etc.
Lastly, outline supports offset with the property outline-offset while border doesn't.

I hope this can help's you

Admin wrote:

SarahMae wrote:Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

What is your code in CSS text-shadow?

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px lightgreen;
}
</style>
</head>
<body>

<h1>Sarah Mae</h1>

</body>
</html>