Borders and shadows w3-border, w3-shadow.
Borders and shadows are important W3.CSS styling features for visually improving or commercially previewing user-defined HTML, JavaScript, and W3.CSS webpage design elements. The Borders and Shadows W3.CSS framework provides simple utility classes for easily implementing borders and shadows on webpage elements. This allows web developers to apply custom styling effects to their webpages without writing custom CSS web code.
Let’s take a closer look at how to use borders and shadows in W3.CSS.
Borders class concept in W3.CSS.
Borders CCSS styling attributes are used to add or display a visible outline around web elements on user-created HTML, JavaScript, and webpage component elements. W3.CSS provides several important classes for applying border effects to CCSS object elements and customizing the thickness, color, and style of those applied borders.
Names of common W3.CSS border classes.
- .w3-border – Adds a border with a default width, color, and style to all sides of a user-defined HTML, JavaScript, or webpage element.
- .w3-border-{color} – Sets the color of a user-defined HTML, JavaScript, or webpage object element border. For example, .w3-border-yellow, .w3-border-lime, etc.
- .w3-border-{size} – This HTML, JavaScript, or webpage object element allows web developers to customize the width of an existing object element border. For example, .w3-border-small, .w3-border-medium, .w3-border-large, etc.
- .w3-border-{direction} – This HTML displays a border in the specified direction on a JavaScript web element.
- .w3-border-top – This HTML displays a border in the top direction on a JavaScript web element.
- .w3-border-right – This HTML displays a border in the right direction on a JavaScript web element.
- .w3-border-bottom – This HTML displays a border in the bottom direction on a JavaScript web element.
- .w3-border-left – This HTML displays a border in the left direction on a JavaScript web element.
- .w3-border-round – This HTML/JavaScript class displays rounded corners of a web element’s border. For example, it adds the border-radius effect.
Example of the w3-border border class in an HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets Explore w3-border Border Class Attributes </title>
</head>
<body>
<!– Here we display w3-border Element with border on all sides of web element–>
<div class=”w3-border w3-padding”>
<p>This paragraph tag has all side border attributes.</p>
</div>
<!– Here we display w3-border-red Element with a user define border color –>
<div class=”w3-border w3-border-red w3-padding”>
<p>This paragraph tag has red border color.</p>
</div>
<!– Here we display w3-border Element with specific border size thickness –>
<div class=”w3-border w3-border-large w3-border-teal w3-padding”>
<p>This paragraph tag has a large border with teal color attributes.</p>
</div>
<!– Here we display w3-border Element with border on the top and bottom right direction only –>
<div class=”w3-border-top w3-border-bottom w3-border-right w3-padding”>
<p>This paragraph tag has a borders display at the top and bottom direction only.</p>
</div>
<!– Here we display w3-border Element with rounded borders attributes –>
<div class=”w3-border w3-border-round w3-border-lime w3-padding”>
<p>This paragraph tag has rounded borders attributes.</p>
</div>
</body>
</html>
Explanation of w3-border border class example.
- In the first example, the div block applies a basic border around the paragraph tag.
- In the second example, the div block paragraph tag displays the border color as red.
- In the third example, the div block paragraph tag displays the border as large.
- In the fourth example, the div block paragraph tag displays borders only in the top, bottom, and right directions.
- In the fifth example, the div block paragraph tag displays the border in a rounded order. The .w3-border-round class is used for this.
w3-border border size class.
Here, web developers can fix the thickness of a specific border using the W3.CSS classes below.
- .w3-border-small – This applies a small border size to an HTML, JavaScript web element object.
- .w3-border-medium – This applies a medium border size (default) to an HTML, JavaScript web element object.
- .w3-border-large – This applies a large border size to an HTML, JavaScript web element object.
Shadow Class Concept in W3.CSS.
Shadow effect attributes in HTML, JavaScript, and webpage design object elements are mostly used to apply a depth shadow to webpage elements. W3.CSS provides several classes for web developers to add shadow effect attributes of multiple intensities and types.
Basic Shadow Class Attribute Names.
- .w3-shadow – This adds a lightweight shadow effect to an HTML/JavaScript web element object, which displays as a lifted effect.
- .w3-shadow-small – This adds a small shadow attribute to an HTML/JavaScript web element object.
- .w3-shadow-medium – This applies a medium-sized shadow effect to an HTML/JavaScript web element object.
- .w3-shadow-large – This adds a large shadow effect to an HTML/JavaScript web element object.
- .w3-shadow-none – This displays no shadow on the HTML, JavaScript web element object.
- .w3-shadow-hover – This displays a shadow on the HTML, JavaScript web element object when the web developer manually moves the mouse cursor over the element.
Example of the w3-shadow shadow class in an HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets Explore w3-shadow Attributes Example</title>
</head>
<body>
<!– Here we display w3-shadow Element with a basic shadow attributes –>
<div class=”w3-shadow w3-padding”>
<p>This paragraph tag has a basic shadow attributes.</p>
</div>
<!– Here we display w3-shadow Element with a small shadow effect –>
<div class=”w3-shadow-small w3-padding”>
<p>This paragraph tag has small shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a medium shadow effect –>
<div class=”w3-shadow-medium w3-padding”>
<p>This paragraph tag has a medium shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a large shadow effect –>
<div class=”w3-shadow-large w3-padding”>
<p>This paragraph tag has large shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with no shadow effect –>
<div class=”w3-shadow-none w3-padding”>
<p>This paragraph tag has no shadow effect.</p>
</div>
<!– Here we display w3-shadow Element with a shadow on hover effect –>
<div class=”w3-shadow-hover w3-padding”>
<p>This paragraph tag will display a shadow on hover effect.</p>
</div>
</body>
</html>
Explanation of w3-shadow shadow class example.
- In the first example, the div block paragraph tag displays a basic shadow preview.
- In the second example, the div block paragraph tag displays a small shadow.
- In the third example, the div block paragraph tag displays a medium shadow preview.
- In the fourth example, the div block paragraph tag displays a large shadow.
- In the fifth example, the div block displays no shadow using the .w3-shadow-none class.
- In the sixth example, the div block has a hover effect applied to it, displaying a shadow when the web user hovers over the object element.
Grouping and displaying borders and shadows in W3.CSS.
Web developers can easily merge or combine both border and shadow effect attributes on a single element in an HTML or JavaScript webpage to create an effective commercial webpage design object.
Example of the w3-border border and w3-shadow shadow attribute groups in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets Merge Border and Shadow Class w3-border and w3-shadow attributes </title>
</head>
<body>
<!– Here we display w3-border and w3-shadow Element with Border and Shadow attributes–>
<div class=”w3-border w3-shadow-large w3-padding”>
<p>This paragraph tag has a both a border and large shadow attributes.</p>
</div>
<!– Here we display w3-border and w3-shadow Element with Border, Rounded Corners, with Shadow attributes–>
<div class=”w3-border-round w3-border w3-shadow-small w3-padding”>
<p>This paragraph tag has a rounded border with a medium shadow.</p>
</div>
</body>
</html>
Explanation of w3-border and w3-shadow merge class example.
- Here in the first example, the div block paragraph tag has both border and large shadow previews.
- Here in the second example, the div block paragraph tag has rounded corners, border, and small shadow attributes displayed.
