border

border-image

Images can be assigned to borders based on a single image file. The border property must be set.

Compatibility

  • -moz-border-image Firefox
  • -webkit-border-image Safari 5+, Chrome 10+
  • -o-border-image Opera 11+
  • border-image Official syntax

Not supported by Internet Explorer 9, only partly supported by Firefox and Opera. For detailed compatibility info see caniuse.com. For a better understanding of the admittedly difficult syntax see border-image.com.

  • Firefox 3.6+
  • Safari 5+, Chrome 10+
  • Opera 11+
  • Official syntax

No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.

General description

border-image: 1 url(image.png) 2 3 / 3 5px 4 round

  • 1 The path to the background image file.
  • 2 Specifies how the image is applied to the border. Can be used in two ways: Matrix applied and Whole image taken.
  • 3 (Optional, separated by a slash) Border width. Can be different from value 2 and the border-width property set. General shorthand rule applys.
  • 4 (Optional, separated by a slash) Specifies how the image is fitted to the four sides of the border. Possible values are: stretch (default), round and repeat (see examples). If one value is set it is taken for all four sides of the border, with two value the first applys to top/bottom and the second to left/right. This value has no effect on the corners.

Matrix applied

The main usage of border-image is to provide an image file that represents the four corners and four sides of the border as well as background of the element. In this case the image gets cut into nine slices, where each one represents a different part of the border.

border-image: url(image.png) 1 3

  • 1 Sets the size of the areas that are taken to draw border. Can consist of up to four values each representing one side of the border. General shorthand rule applys.
Example

Whole image taken

It is also possible to use the whole image for the border. Not supported by Firefox and Opera.

border-image: url(image.png) 1 100%

  • 1 Must be set to 100% or the actual dimensions of the image.
Example

Examples

Tiled border image with matrix applied

border-image: url(image.png) 1 9 2 round

  • 1 The area taken for all the four sides is 9 pixels high/wide
  • 2 The background image is tiled and fitted (round).
Example
Inspect me!?

Border image with matrix applied and two sides stretched

border-image: url(image.png) 1 7 2 15 3 round stretch

  • 1 The top and bottom parts of the background image are 7 pixels high.
  • 2 The left and right parts are 15 pixels wide.
  • 3 The top/bottom areas of the border image are tiled and fitted (round), the left/right areas are stretched to the whole height (stretch) .
Example
Inspect me!?

Whole image taken and repeated

border-image: url(image.png) 1 26 / 2 13px 3 repeat

  • 1 All four sides of the border set equally and to the actual size of the border image. As the border image is 26 x 26 pixels this corresponds to 100%.
  • 2 Border width set half the image width. Can also be achived by setting the general border-width to the same value and omitting this one.
  • 3 The background image is simply repeated (and centered) without the attemp to fit (repeat). Has almost the same effect like round.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

border-radius

Is used to round the corners of an element that has the border or background property set.

Compatibility

  • -moz-border-radius Firefox 3.6
    • -moz-border-radius-topleft
    • -moz-border-radius-topright
    • -moz-border-radius-bottomright
    • -moz-border-radius-bottomleft
  • border-radius Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+ Official syntax
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius

Supported by all modern browsers. To maintain compatibility with older browser versions it however is advised to additionally use -webkit-border-radius, which orients on the the official syntax, but with one difference. For detailed compatibility info see caniuse.com.

  • Firefox 3.6
  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+
  • Official syntax

No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.

General description

border-radius: 1 8px / 2 13px

  • 1 The radius of the quarter circles that form the shapes of the corners.
  • 2 (Optional, separated by a slash) The vertical radius, which results in a quarter ellipse when different from the horizontal radius.
Example

Examples

Four values given

border-radius: 1 8px 2 13px 3 10px 4 5px

  • 1 Top left corner.
  • 2 Top right corner.
  • 3 Bottom right corner.
  • 4 Bottom left corner.
Example
Inspect me!?

Three values given

border-radius: 1 8px 2 13px 3 5px

  • 1 Top left corner.
  • 2 Top right and bottom left corner.
  • 3 Bottom right corner.
Example
Inspect me!?

Two values given

Note: When using -webkit-border-radius it is assumed that the first value stands for the horizontal radii and the second for the vertical radii like here, which is completely different from the official interpretation below.

border-radius: 1 8px 2 13px

  • 1 Top left and bottom right corner.
  • 2 Top right and bottom left corner.
Example
Inspect me!?

One value given

border-radius: 1 8px

  • 1 All four corners rounded equally.
Example
Inspect me!?

Elliptical corners, two values given

With the addition of a slash it is possible to set the horizontal and vertical radii separately.

border-radius: 1 8px / 2 13px

  • 1 All horizontal radii set equally.
  • 2 All vertical radii set equally.
Example
Inspect me!?

Elliptical corners, four values given

Three and four values on each side of the slash follow the notation given above (without slash).

border-radius: 1 8px 2 13px / 3 10px 4 5px

  • 1 Horizontal radii for top left and bottom right corners.
  • 2 Horizontal radii for top right and bottom left corners.
  • 3 Vertical radii for top left and bottom right corners.
  • 4 Vertical radii for top right and bottom left corners.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.

18 Comments

Add comment
  1. Cornell Campbell

    Forgive me if I am simply mis-reading your compatibility charts, but I thought you’d like to know that Safari 5 does indeed support the official syntax for border-radius. In other words, there is no longer a need for -webkit-border-radius in Safari 5.

    1 Reply

    • Thanks for the tip Cornell! The change of the prefix must have happened in version 5.0.4 of Safari. I’ve noticed shortly that it has been released. Pity that they don’t auto update their browser or at least give a note to update as I don’t use this browser very often.

      Anyway I have adjusted the browser chart above.

      2
  2. Cornell Campbell

    That was quick! Thanks. They do sort-of auto update the browser. Whenever the Apple Software Update runs (I think weekly, or bi-weekly maybe?) it will notify you if there is a Safari update. But yeah, it would be nice if they did it on start-up or something like that.

    Side note, I really like the site. Well done!

    3 Reply

  3. It was my pleasure! :) And thanks for the compliment.

    Never noticed that there is something like an auto-update. I use I quite long now and new got a note to update. ;) I should make it a habit to regularly check every browser (except Chrome ;) ) if there is an update.

    Are you on Twitter by the way? Maybe you want to have a look at @edge0703.

    4 Reply
  4. Cornell Campbell

    I am indeed on Twitter. I’ll give @edge0703 a look. Thanks :)

    5 Reply
  5. Syed Sheheryar

    I was trying the border-radius while using the HTML5 schema, it was not working … then I used the previous HTML , it worked fine.

    6 Reply

    • Could you please further describe your problem Syed? I’d love to help you!

      7

  6. Awsome article !! What cms do you use on your www ?

    8 Reply

    • Thanks for the compliment. As noted in the footer I use WordPress. It’s sometimes a little bit bloated and slow but otherwise a great and feature-rich CMS.

      9
  7. Christopher San-Claire

    Great job there, I’m loving the examples, be great the day we don’t have to use the browser specific making all official syntax.

    I’m in the process of relearning CSS & HTML after long long absence and you have been great help to me with css3files.com Christian., many thanks

    @Cornell Campbell: I myself don’t use safari being on window but its there for testing and quicktime so it do’s offer and update often.

    @Strikeforce Betting: as Christian says “WordPress if feature -rich CMS and can be bloated” depending on what you are after I learning ExpresionEngine woth checking it out.

    10 Reply

    • Thank you very much for the compliment Christopher! I am really pleased that I could help you at relearning CSS and HTML.

      11
  8. Christopher San-Claire

    Your welcome, and grates on your iPad 2… So it on twitter this afternoon…

    12 Reply

  9. I wonder why you don’t receive the Apple Software updates, Christian. That is odd indeed. I use Windows 7, receive Apple updates based on my use of iTunes (own none of Apple’s other very nice products). I use Safari only for checking cross-browser compatibility. I live in the U.S.A. mainland, am not sure where prior commenter Cornell Campbell is, but noticed that you are in Austria. That should make no difference though.

    Like Cornell, I receive an Apple Software update notice at least every other week (fortnightly?) although Safari browser updates are not released that often. My browser of choice is Chrome, and I laughed at your reference to update frequency!

    13 Reply

    • Well, I don`t use iTunes at work so there is no chance for me to get these update reminders. Since I also use Safari very rarely (just to check sites sometimes like you) I might miss some notes from time to time. But overall it’s not a big affair. What’s Twitter for if not to be always up-to-date at browser development. ;)

      14
  10. Reno Octa Achmad Fauzi

    Wow, it`s good!

    15 Reply
  11. nanz

    Wow amazing job and I just love the design of this website. I am a rookie at CSS and trying to catch up :)

    16 Reply

  12. Thank you for this Post ! Nice work! :)

    17 Reply
  13. André

    Thanks for these :)

    18 Reply

Add a comment

HTML: <a>, <code>, <pre> and <strong> are allowed
* Required