Welcome!

Machine Learning Authors: Pat Romanski, Liz McMillan, Carmen Gonzalez, Yeshim Deniz, Zakia Bouachraoui

Related Topics: Machine Learning

Machine Learning : Article

Adding Rounded Corners to HTML with CSS

Using the Border Radius Setting in CSS 3

As the name implies, a Cascading Style Sheet, or CSS, is a document that describes the visual style of your content. Web designers have been leveraging Cascading Styles Sheets as a tool to control content placement and text presentation in web pages for over ten years.

With the advent of Web 2.0 applications, it is even more important to add control to your designs. The Webkit open source project, used in Apple’s Safari and Google’s Chrome, and Mozilla’s FireFox, recognize that CSS must be flexible enough to meet your design needs. To this end, there is now included in the latest versions advanced CSS styles. One of these new features is the ability to add rounded corners to objects.

Adding rounded corners is not a new technique for the web. The effect, however, is created through using images and tables to create the illusion of rounded corners. Adding images to the pages ensures that the page takes longer to load and makes modifying the page later more complex.

A simpler approach is to use the proposed Corner-Radius CSS definition that is currently supported in FireFox 3.0, Safari 3.0, Mobile Safari on your iPhone/iPod Touch and Google’s Chrome. The Corner-Radius definition is line you can add to your CSS style. The following HTML code has a style embedded that changes the presentation of the block of text to have rounded corners with a heavy, black outline:

<p style="-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 4px solid #FF0000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, lacus in cursus cursus, justo purus fringilla nisi, quis cursus urna velit vel felis. Nulla ac mi. Phasellus sodales dui vel tortor. Praesent dignissim. Vestibulum vulputate nibh rutrum purus. Nulla ante. Sed porta. Vestibulum commodo, mi nec tincidunt laoreet, urna risus ornare libero, in imperdiet sapien enim vel nisi.</p>

The style description has been highlighted in bold. Your content will now look like this on your Web page:

As you can see, the block of text now has a solid red line with rounded corners. It is this style description that controls the size of the radius, not an image. You can then easily modify the description as shown below:

-moz-border-radius: 10px

-webkit-border-radius: 10px

The standard is currently only in proposal stage and has not been adopted by all Web browsers. For this reason, you need to add two border-radius style descriptions: One, for FireFox (-moz-border-radius); and one for Safari/Chrome (-webkit-border-radius). Changing the value of the border-radius will change the size of the border. For instance:

Border-radius: 15 px

Border-radius:25 px

Border-radius:45 px

As you increase the border radius, you will also have to add additional styles, such as padding, to ensure that your border does not cut through your text as is shown in the example of border-radius:45 px. Here is how you can add padding to manage your style.

<p style="-moz-border-radius: 45px;-webkit-border-radius: 45px;border: 4px solid #FF0000;padding: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, lacus in cursus cursus, justo purus fringilla nisi, quis cursus urna velit vel felis. Nulla ac mi. Phasellus sodales dui vel tortor. Praesent dignissim. Vestibulum vulputate nibh rutrum purus. Nulla ante. Sed porta. Vestibulum commodo, mi nec tincidunt laoreet, urna risus ornare libero, in imperdiet sapien enim vel nisi.</p>

The content now looks like this:

Creating interactive tabs

The new border-radius style also has the option of allowing you to control which corner you want the border to appear on. This can be useful when you want to create tabs for you web page. For instance, the following style will add tabs to the top left and top right corners:

.standardTabEffect{

font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

background-color: #FFFF00;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 15px;

-webkit-border-radius-topleft: 15px;

-webkit-border-radius-topright: 15px;

border: 4px solid #FF0000;

padding: 10px;

color: #FF0000;

text-decoration: none;

font-weight: bold;

}

This style can now be added to a central style sheet link to content on your page. The content on your page can now reference the style. You can add the following HTML to see this effect:

<a class="standardTabEffect" href="#">This is Tab 1</a><a class="standardTabEffect" href="#">This is Tab 2</a><a class="standardTabEffect" href="#">This is Tab 3</a>

When you view the page, the HTML above will look like this:

As you might imagine, you can inherit existing CSS formatting into your border-radius designs. For instance, you can add a simple roll over effect when you include the following style description. The important part is to add the “:hover” parameter. This instructs the Web browser to only use this style when a user is rolling over the link with their mouse:

.standardTabEffect:hover{

background-color: #FF0000;

border: 4px solid #FFFF00;

color: #FFFF00;

}

The action looks like this:

Without using complex images or tables, you have created a series of tabs that can be easily managed through your CSS and HTML.

The Caveat
Applying rounded corners to your design is a must for almost any Web site. There are some caveats, however, to using rounded corners in CSS. The first one is a biggie: NO VERSION OF MICROSOFT’S INTERNET EXPLORER SUPPORTS CSS CORNERS. Microsoft does a good job of talking up their support for CSS, but what they fail to mention is their lack of support for advanced CSS3 standards. Unfortunately, this is a big caveat for many designers at 70% of all Internet users are coming to your site using Internet Explorer.

More Stories By Matthew David

Matthew has written books for Friends of Ed, Pearson Press, New Riders, Wiley, Focal Press and Peach Pit. He is also experience at leading teams top deliver bestselling titles books that come with accompanying video training and media. An example is Flash MX Magic, a book written by 7 authors, with an accompanying web site and CD. The book sold over 45,000 copies in 12 languages. Matthew is also the author of 400+ articles.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


CloudEXPO Stories
Because Linkerd is a transparent proxy that runs alongside your application, there are no code changes required. It even comes with Prometheus to store the metrics for you and pre-built Grafana dashboards to show exactly what is important for your services - success rate, latency, and throughput. In this session, we'll explain what Linkerd provides for you, demo the installation of Linkerd on Kubernetes and debug a real world problem. We will also dig into what functionality you can build on top of the tools provided by Linkerd such as alerting and autoscaling.
DevOps is a world surrounded by information, starting from a single commit and ending in roll out to production. In this talk, I'll introduce you to the world of Taboola DevOps data collection, to better understand what goes on under the hood. The system we've developed in-house helps us collect and analyse the entire DevOps process from the very first commit all the way to production. It provides us a full clear view with a drill-down toolset that helps keep us away from the dark side. Our KPI's moved from being abstracted ideas to data driven goals, which we can measure and act upon. We're living in a data driven world when all business components are based on our clients action and reaction, why not doing the same thing within our DevOps eco-system?
After years of investments and acquisitions, CloudBlue was created with the goal of building the world's only hyperscale digital platform with an increasingly infinite ecosystem and proven go-to-market services. The result? An unmatched platform that helps customers streamline cloud operations, save time and money, and revolutionize their businesses overnight. Today, the platform operates in more than 45 countries and powers more than 200 of the world's largest cloud marketplaces, managing more than 27 million enterprise cloud subscriptions valued at more than $1 billion in revenue.
In his session at 20th Cloud Expo, Mike Johnston, an infrastructure engineer at Supergiant.io, will discuss how to use Kubernetes to setup a SaaS infrastructure for your business. Mike Johnston is an infrastructure engineer at Supergiant.io with over 12 years of experience designing, deploying, and maintaining server and workstation infrastructure at all scales. He has experience with brick and mortar data centers as well as cloud providers like Digital Ocean, Amazon Web Services, and Rackspace. His expertise is in automating deployment, management, and problem resolution in these environments, allowing his teams to run large transactional applications with high availability and the speed the consumer demands.
Containerized software is riding a wave of growth, according to latest RightScale survey. At Sematext we see this growth trend via our Docker monitoring adoption and via Sematext Docker Agent popularity on Docker Hub, where it crossed 1M+ pulls line. This rapid rise of containers now makes Docker the top DevOps tool among those included in RightScale survey. Overall Docker adoption surged to 35 percent, while Kubernetes adoption doubled, going from 7% in 2016 to 14% percent.