Sunday, April 20, 2025

CSS Border Style, Width

Border, style, and width are used to define the appearance of the border of an HTML element.

  • border is the shorthand property for setting all aspects of the border of an element, such as border-width, border-style, and border-color.
  • border-width sets the thickness of the border.
  • border-style sets the style of the border, such as solid, dotted, dashed, etc.
  • border-color sets the color of the border. 

<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam.</p>

</body>
</html>

Simple html paragraph example. 


p {
	border-style: solid;
	border-width: 5px;
}

The border-style property sets the style of the border, which in this case is set to "solid". There are other options such as "dashed", "dotted", "double", "groove", "ridge", "inset", and "outset" that you can use to style the border.

The border-width property sets the width of the border, which in this case is set to "5px". You can use any valid length unit to specify the width such as pixels, em, rem, and so on.

Note that the border shorthand property can be used to set both the border style and width in a single line. For example, border: 5px solid red; sets a 5-pixel red border with a solid style for an element. 


p {
	border-style: dotted;
	border-width: 10px;
}

The CSS code p { border-style: dotted; border-width: 10px; } sets the style and width of the border for all <p> elements in the HTML document.

The border-style property sets the style of the border, which in this case is set to dotted, which means the border will be a series of dots.

The border-width property sets the width of the border, which in this case is set to 10px, which means the border will be 10 pixels wide.

Together, these properties create a dotted border with a width of 10 pixels around all <p> elements in the document. 


p {
	border: solid 10px;
}

This code sets the border of all <p> elements to a solid line with a width of 10 pixels. It is a shorthand notation that combines the border-style, border-width, and border-color properties into a single border property. In this case, the border-style is set to solid and the border-width is set to 10px.

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...