Browser

Working with new styling for Borders in CSS3

Ryan Boudreaux illustrates the new properties for working with Borders in CSS3 using example code for border-color, border-radius, and border-image.

In this segment in the CSS3 series, we will review border properties which can be implemented today including, border-color; border-radius, which defines rounded corners; and border-images that utilize various images and property rules, features, and functions.

Border-color

Using the CSS3 border-color property allows you to assign a border of X pixels, as in the 8px in the example below, then you can use up to X colors for that border rule, each color rendering at 1 pixel width. And if you are using a standard border of 10 pixels but only apply six or seven colors, the last color will then be applied to the remaining border width.

Creating a colored border with CSS3 coding is actually quite easily accomplished with the following example using color codes for graduated grey shading:

.border {
      border:
            solid 8px #B9B9B9;
            -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
            -moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
            -moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
            -moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
            padding: 5px 5px 5px 15px;
}

The resulting border-color CSS3 code will render a grey fading border box surrounding the content text. Currently supported only by Mozilla Firefox at this time, it would appear like this when applied in the following example HTML:

<div class="border">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.</p>
</div>
Figure A shows how it displays in Firefox 6.0.2:

Figure A

Border-radius

Adding rounded corners to a border means adding a border-radius property and is just a matter of adding the line which defines the number of pixels for each corner to be rounded. Adding the following line of code to the previous example's border style results in the rounded corners of Figure B. The syntax for placement refers to top-left, top-right, bottom-right, bottom-left:
-moz-border-radius: 35px 35px 35px 35px;

Border-radius is only implemented in Mozilla Firefox at this time; this is how it renders in in Firefox 6.0.2:

Figure B

The next example results in a differently styled rounded border with this code:

-moz-border-radius: 35px 0px 35px 0px;

Here's how the tweak looks in Firefox 6.0.2:

Figure C

Border-image

An alternative border feature of CSS3 is the border-image property, which allows you to create custom borders and flexible boxes surrounding HTML content. This property allows you to define an image to be used in place of the normal border of an element. The border-image property currently works in Safari, Firefox 3.1+ and Chrome when utilizing the prefixes -moz- and -webkit- respectively. The syntax to use the border-image property includes three parts as shown below using the CSS3 rule:

border-image: url(borderimage.png) X Y Type;

The  property specifies (1) the URL of the image to use as a border, (2) where to slice the image defined in height and width (X equals slice height, Y equals slice width), and (3) how the browser will apply those sections to the border edges of the element; type can specify whether the border is repeated, rounded or stretched. The options for type= are repeat or round or stretch.

The first part of the property rule is a continuation of the well-known background images property and how they have been applied for years. For this example, I will use the image Bgimage.png which is displayed below, and is 148px X 148px.

Figure D

The second part of the rules for the border-image property can have up to four values which specify the border width and are specified in the typical order of top, right, bottom, left, and can be expressed as pixels or percents, where pixels are referenced with the % symbol and pixels are listed alone with no "px" indication, as shown in the examples below:

border-image:url(Bgimage.png) 48 48 48 48 round;

or

border-image: url(Bgimage.png) 30% 30% 30%  30%  round;

Both result in the following as rendered in Firefox 6.0.2:

Figure E

The third piece of the border-image rule tells the browser how to handle the middle part of your image, or around the four edges of the element.

Repeat will tile the image, stretch will scale the image, and round will act the same as repeat in that it will scale, or round to the height and width of the element, either a layer or defined div. You can define up to two values, the first of which is the top and bottom edges, and the second is for the left and right edges. The example below incorporates a defined border-width, Mozilla and Chrome prefixes, and a fallback border-image rule.

 border-width:48px;
  -moz-border-image:url(Bgimage.png) 48 48 48 48 repeat stretch;
  -webkit-border-image:url(Bgimage.png) 48 48 48 48 repeat stretch;
  background-image:url(Bgimage.png) 48 48 48 48 repeat stretch;
  width:400px; padding:5px 5px; height:inherit;
As you can tell the border image is now stretched to 48px on all edges as shown in the example in Figure F.

Figure F

The next example will demonstrate use of the round rule where the image will be repeated and scaled (or rounded) to the height and width of the defined layer it is contained within. I'll use the image in Figure G and the following CSS3 code:

Figure G

border-width:15px;
  -moz-border-image:url(bgborder1.png) 43 43 round;
  -webkit-border-image:url(bgborder1.png) 43 43 round;
  width:400px; padding:10px 10px; height:inherit;
The result is the border in Figure H (using the same example HTML as above), displayed in Firefox 6.0.2:

Figure H

The next example will demonstrate the use of the stretch rule, utilizing the image in Figure I and CSS3 code below:

Figure I

border-width:15px;
  -moz-border-image:url(bgborder2.png) 35 35 stretch ;
  -webkit-border-image:url(bgborder2.png) 35 35 stretch;
  width:400px; padding:10px 10px; height:inherit;
The resulting image-border is shown in Figure J as displayed in Chrome 14.0.835:

Figure J

In future segments covering the CSS3 series, I will review box shadow, 3D text, transitioning including roll-over effects, and other features which can be utilized today in many modern browsers.

Also:

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks