CSS Properties: How to specify a 3D left outset border?

Last update on February 19 2024 13:02:18 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>How to specify a 3D left outset border</title>
<style type="text/css">
/* CSS styling */
h1  {border-style: solid; /* Sets the border style for h1 elements to solid */
border-width: 10px; /* Sets the border width for h1 elements to 10 pixels */
}
h1.outset {border-left-style:outset;} /* Defines a class for h1 elements with a left outset border */
</style>
</head>
<body>
<p>w3resource Tutorial</p><!-- Paragraph content -->
<h1 class="outset">Outset left border</h1><!-- h1 element with an outset left border -->
<p>The effect depends on the border-color value</p><!-- Additional information about the effect of outset border -->
</body>
</html>

Explanation:

The CSS code sets the style for the <h1> elements to have a solid border with a width of 10 pixels.
A class named "outset" is defined for <h1> elements that specifies an outset style for the left border.
In the HTML body, there is a paragraph with the text "w3resource Tutorial" followed by an <h1> element with the class "outset", resulting in an outset-style left border for that element.
There's also a paragraph explaining that the effect of the outset border depends on the border-color .

Live Demo:

See the Pen border-left-style-outset-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page