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 4+
  • -webkit-border-image Safari 5+
  • -o-border-image Opera 11+
  • border-image Safari 6+, Chrome 15+

Not supported by Internet Explorer. For detailed compatibility info see caniuse.com. For a better understanding of the admittedly difficult syntax see border-image.com.

  • Firefox 4+
  • Safari 5+
  • Safari 6+, Chrome 15+
  • Opera 11+

General description

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

  • 1 The path to the background image file.
  • 2 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.
  • 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.
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!?

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

  • border-radius Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

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

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

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.
  • 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.

    • http://www.css3files.com Christian Krammer

      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.

  • 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!

  • http://www.css3files.com Christian Krammer

    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.

  • Cornell Campbell

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

  • 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.

    • http://www.css3files.com Christian Krammer

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

  • http://betonufc.info strikeforce betting

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

    • http://www.css3files.com Christian Krammer

      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.

  • 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.

    • http://www.css3files.com Christian Krammer

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

  • Christopher San-Claire

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

  • http://myindigolives.wordpress.com/ Ellie K

    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!

    • http://www.css3files.com Christian Krammer

      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. ;)

  • Reno Octa Achmad Fauzi

    Wow, it`s good!

  • nanz

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

  • http://www.webexstudios.com webexstudios

    Thank you for this Post ! Nice work! :)

  • André

    Thanks for these :)

  • milad

    I like it!

  • http://twitter.com/Flocke Jens Grochtdreis

    Android-Browser on Android 2.3.x does not need -webkit-prefix but it does ignore border-radius in percentage.

  • Sanil Shinde

    Hi ,
    I am trying to apply border-radius to div,which have border with gradient color.
    But it is not allowing me to apply border-radius.
    Below is my code snippet.

    .border:nth-child(1) {border-image: -webkit-linear-gradient(#000, #fff) 14% 14% 14% 14% stretch; }
    .border{ border-radius:15px; -webkit-border-radius:15px; }
    .border {display: inline;float: left;margin: 15px;position: relative;border-width: 20px;width: 160px;height: 160px;}

    Lorem Ipsum

    • Chris_Krammer

      The problem is that border-radius doesn’t work when a border-image is applied. I’ve made a quick example to showcase that: http://codepen.io/edge0703/pen/hmGfL

      If you remove border-image and just apply a simple border then border-radius works.

    • Sanil Shinde

      Thanks for reply.
      is their any other way to add border color as gradient :)

    • Chris_Krammer

      Have a look at the former example, which I have updated:
      http://codepen.io/edge0703/pen/hmGfL

      You could use a pseudo-element to set up a layer behind the actual content, which has a gradient applied. Of course that doesn’t work in older IEs (just like border-image).