PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

The best way to add rounded corners using CSS and HTML

There are many ways out there to create simple rounded corners in CSS and HTML; however, some of them are combersome and they either take up a lot of code or they require you to use images. The easiest and best way that I have found for adding rounded corners to boxes in CSS (compatible with latest browsers) is the following:

Add this code to your style sheet:

#box
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display:block;
background:#555555;
color:#fff;
padding:10px;
font-weight:bold;
}

Then you'll add the following html and you'll have rounded corners

<div id="box">
This way using -moz-border-radius: 5px, -webkit-border-radius: 5px, and border-radius: 5px will display a radius of 5 pixels around your block. Such as this surrounding div.
</div>

Comments (0)

loading comments