HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS Border Style


CSS Tutorial » CSS Border Style

The border-style property sets the style of an element's four borders. for this property we can have from one to four values.

CSS Syntax

border-style: none or hidden or dotted or dashed or solid or double or groove or ridge or inset or outset or initial or inherit;


We can add CSS Style as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css

How to create CSS Border Style - examples


You can try to execute the following code to change CSS Border Style on this page.

Examples:

1. border-style: solid double dotted dashed;
top border is solid
right border is double
bottom border is dotted
left border is dashed

2. border-style: double solid dotted;
top border is double
right and left borders are solid
bottom border is dotted

3. border-style: solid dotted;
top and bottom borders are solid
right and left borders are dotted

4. border-style: dashed;
all four borders are dashed


Example:
Example 1, How to create CSS Border Style - examples:
  <!DOCTYPE html>
<html>
<head>
<title>CSS Border Style - examples - example</title>
<style>
h1 {
color:red;
}
.border1 {
border-style: solid double dotted dashed;
}
.border2 {
border-style: double solid dotted;
}
.border3 {
border-style: solid dotted;
}
.border4 {
border-style: dashed;
}
</style>
</head>
<body>
<h1>CSS Border Style - examples</h1>
<div class="border1">1 You text here: Learn how to create CSS Border Shadow. </div> <br /><br />
<div class="border2">2 You text here: Learn how to create CSS Border Shadow. </div> <br /><br />
<div class="border3">3 You text here: Learn how to create CSS Border Shadow. </div><br /><br />
<div class="border4">4 You text here: Learn how to create CSS Border Shadow. </div><br /><br />
<div style="border-style: double solid dotted">5 I used inline CSS. You text here:
Learn how to create CSS Border Radius. </div>
</body>
</html>

css border style, table, 1px, top, examples, top bottom left right, dashed, mdn, dashed spacing CSS Border Style - css tutorial

819. CSS margin-top property - CSS tutorials - w3resource

https://www.w3resource.com/css/margin/CSS-margin-top-property.php

2697. EchoEcho.Com - Web Hosting - JavaScript Tutorial - HTML tutorial - CSS Tutorial - Flash Tutorial - Online for free!
Web hosting and tutorials for html javascript css flash. Online web master forum design articles, graphics, tools, tricks and much more
http://www.echoecho.com/

3300. CSS border radius, css tutorial
CSS border radius css tutorial
https://www.agernic.com/css-tutorial/css-border-radius.html

2804. CSS background, Color, Background Image, css tutorial
CSS background, Color, Background Image css tutorial
http://www.agernic.com/css-tutorial/css-background-color-image-css-tutorial.html

824. Introduction to CSS user interface - CSS tutorials - w3resource

https://www.w3resource.com/css/user-interface/introduction.php

821. CSS padding-top property - CSS tutorials - w3resource

https://www.w3resource.com/css/padding/CSS-padding-top-property.php

Your add here
PHP explode() function

PHP strlen() function

PHP printf() function

PHP rtrim() function

PHP strip_tags() function

PHP define() function

PHP htmlspecialchars() function

PHP count() Function

PHP strtolower() function

PHP strcmp() function

PHP print() function

PHP strtoupper() function

PHP html_entity_decode() function

PHP similar_text() function

PHP htmlspecialchars_decode() function

PHP wordwrap() function

HTML div border color
CSS Text Size
HTML Text Style
CSS Button
HTML button onclick - How to create a HTML button style onclick
CSS font color